Skip to main content

Select Element on Your Page

 

To associate tour steps (pointers) with specific elements on your site, you need to hook to the selectors of elements. Selectors are used to "find" the HTML elements on your site. It is not difficult to find out the selector of a specific page element.

The easiest way is to use our Chrome extension.

Usetiful for Chrome extension (Recommended)

1. We recommend you to first install the extension - it enables you to preview product tours directly on your page without embedding the code. When on the page, it allows you to get the element selector on just one click. 


2. Inside the tour editor, the "Element" field require you to enter the selector of the HTML element on your site.


Click on the "Select element" action on the right side of the field.  The following dialog will appear if the Usetiful browser extension is enabled.


3. Enter the address of your web page and click "Open page"

4. To select the element on the target page, just move your mouse cursor around and elements will automatically highlight as you hover above them. Once you find the right element just click and the selector will be saved to the clipboard.


5. Now you can return to the tour editor and paste (CTRL+V) the selector from the clipboard to the "Element" field.

6. Save the tour settings. The appropriate step is now linked to the selected element on your site (first image in our examples).

When previewing the tour, you can now see the pointer displayed near the select element.


Use browser inspector


1. In your browser (ideally in Google Chrome or Firefox) navigate to the specific web page where the tour step should be linked to a page element.

We will use our demo site as an example. Let's say that we want to associate the tour step with the first picture on this page (the picture of London, top-left).




2. Right-click on the element you want to find a selector for and choose the "Inspect" option.

3. The inspector panel will appear with the highlighted element. It should look similar to the picture below:




When you hover with the mouse cursor over the blue like in the inspector panel, your element is highlighted on the page. If you changed your mind and want to select a different element, you can hover over other rows in the inspector panel to find the right one.


4. Right-click on the blue row in the inspector panel and choose the "Copy > Copy selector" option.


5. The element selector is copied to the clipboard. Now, return to Usetiful administration - paste the value from clipboard (CTRL + V) to the "Element" field in the configuration of the given tour step.



6. Save the tour settings. The appropriate step is now linked to the selected element on your site (first image in our examples).

When previewing the tour, we can now see the pointer displayed near the selected element.


Related:

Popular posts from this blog

4 Types of Customer Satisfaction Survey and Their Best Practices

  A customer satisfaction survey is a fantastic tool for gathering information from current and past users. They can help your customer success teams understand the areas where your business is doing well — and where you’re lacking. Leveraging this information allows you to improve the customer experience, retain users, and even build loyalty. Image by Freepik In this article, we'll look at the four most valuable types of customer satisfaction surveys and some of the best practices you can employ to make them work. What is customer satisfaction? Customer satisfaction measures how your products or services meet customer demand. It's a strong gauge of the overall customer experience users have with your brand. Customer satisfaction can seem like a nebulous concept. However, there are many great surveys that can help you understand how your users feel about your product or service. Benefits of customer satisfaction surveys Running a customer satisfaction survey has many benefits. ...
Read more

How DAP Can Help Your Sales and Marketing Teams

  These are trying times for the overall business community. The rise in interest rates has slowed economic activity, with subsequent budget cuts targeting sales and marketing departments in particular.  You've probably already heard how digital adoption platforms (DAPs) like Usetiful can boost sales and marketing for your product. But what about using the software to help your sales and marketing employees?  In this article, we'll show how you can use a digital adoption solution like Usetiful to drive better outcomes for not just your product and your users but also your employees. Image by our-team on Freepik Sales reps and time to productivity (TTP) If you're familiar with digital adoption tools like Usetiful, you'll already understand concepts like time to value (TTV). In short, it's a metric that measures how long it takes a user to get value from your product. Another way you can look at this is how long it takes someone to engage with your product and gain a ...
Read more

The Challenges of the Digital Workplace and How to Overcome Them

  The digital workplace offers an exciting new frontier in how we think about work. However, like any form of technological disruption, businesses must overcome specific challenges to unlock the potential benefits of this change. Let’s explore some of these roadblocks and see how a digital adoption platform (DAP) can provide an elegant solution. Image by DCStudio on Freepik What is the digital workplace? The digital workplace is a decentralized work ecosystem connected by digital devices, tools, and platforms, enabling deep collaboration across various locations.  It’s a virtual space that mirrors the connectivity of the office but with a greater emphasis on seamless interactions, information and resource access, productivity, and personalization. According to the consultancy firm Forrester, the digital workplace consists of six main pillars . They are: Core productivity platforms Employee-facing HR tools An orchestration layer Experience touchpoints Analytics Application inte...
Read more