On Click: Configuring an Experience for Interaction with Web Page Elements

The On Click Experiences can be set up on all web pages. Create a designated area on a web page that triggers the On Click Experience. 

You can have multiple designated areas on a single web page that trigger the same On Click Experience or separate On Click Experiences. The On Click Experience fires when the user clicks the designated area.

As a best practice, you may want to highlight the designated area to encourage the users to click the area.

Hushly recommends using an On-Click overlay with or without a preview to provide the best user experience and maximize lead conversations.

To create an On Click Experience, you can follow the below steps:

1. From the Left Nav Menu, click Experiences.   
2. On the Experiences page, click Create an Experience.   

3. In the New Experience pop-up window, enter the name of the Experience.
      
4. Enter the description. Description of an optional field. Other users from your organization can view the description.
   
   
5. Click Save. You are redirected to the Settings tab.
   
   
6. On the Settings tab, fill in the various parameters of the Experience.          
7. The Name & Description section opens with the Experience name and description filled with the details you entered earlier. You can edit the name and description.
   
   
8. To configure the appearance of an Experience, refer to Branding for an Experience. Also, to configure localization of the opt-in form elements, refer to Experiences: Configuring Advanced Setting
   

Who: Defining the Target Audience

You can use the Who tab to define the target audience for the Experience. When the target audience matches, the Experience is shown to the user.

To configure the target audience:

1. Click the Who tab.         
2. Select the audience (using Page URL, Page URL Path, Traffic Source), location (using IP Address, Country), and
   device type. To know more about rules, refer to the topic, More About Rules.
   • Page URL: URL of the page where the Experience triggers.
   • Page URL Path: Part of the page URL.
   • Referrer URL: Reference URLs are the URLs that refer the user to the webpage.
   • IP Address: IP address of the device accessing the webpage.
   • Traffic Source: Search engine or website.
   • Last Exit-Intent Popup Time: After the exit-intent pop-up is shown once to the user:
     • To show the exit-intent pop-up again.
     • Or, not to show it for an interval configured using this option.
   • Country: The country of the user.

Important: If Data Providers such as Bombora, and 6sense are configured for your firm, you can create rules based on data as well.

3. Use the following comparison criteria to define a rule.
   
   
4. Enter the value for the rule in the text box.
   
5. To add another rule, click Add Rule and repeat steps 1 to 4.
   
   
6. Click Match ANY Rule to configure what rules should be matched.

Match Any: The Experience is launched when at least one rule matches the user’s state.

Match All: The Experience is launched when all rules match the user’s state.

Match Advanced: The Experience is launched when the combination of rules matches the user’s state.

Note: To know more about rules, and how to define rules, and match the rules, refer to the topic, More About Rules.

7. To sort the order of the defined rules, click on the icon to drag and drop the rule in the position required.
   
   
8. Click Save Changes to save the configuration.
   
   
9. Click Next to save the configuration and go to the What tab.
   
   

What: Choosing the Assets to Showcase when the Experience Opens

Use the What tab to add Assets to an Experience. The user is shown these Assets when the Experience is launched.

The first Asset shown to the user is known as the Primary Asset. The remaining Assets of the Experience are displayed in the Recommended section of the Experience.

1. Click the What tab and either click Add Assets or the Click here link.
   
2. From Add Assets to Experience pop-up window, select the Assets you want to include.    
3. Select the Assets. Click Add Assets to add the selected Assets to the Experience.
    Notes:
   • To add assets using the search options, click here.
   • To display the selected assets in a segment.
     • Select a Segment from the drop-down list in the Personalize Experience block.             
     • The selected assets will be shown to the visitor only when the visitor belongs to the particular segment.              
4. The Assets are added and displayed in the Experience - What tab.   
5. Click Next to go to the When tab.
   Note: You can also define and add Assets to the Segment refer to Associating a Segment and Adding Assets to it.
   
   

When: Triggering the Experience On Clicking Page Elements

The On Click event displays the Experience in a pop-up window when you click a page element such as a box, link, button, banner, and so on.

1. Click the When tab.   
2. Click On Click. The On Click section opens.   
3. Select the device type. The Experience is launched only for the selected device type. To trigger the Experience on all device types, select All: 
   If you want to have it only on Mobile, click here to continue.
      
4. Enter the CSS Selector. The CSS selector identifies the page elements that trigger the Experience when clicked. You can configure one or more elements of the page to trigger the Experience.
   To find a CSS selector:
   • Open the web page that will display the Experience.
     
     
   • Right-click on the web page to open the right-click menu.
        
   • Select Inspect Element. The following screen is displayed at the bottom of the web page.
        
   • Click the arrow at the upper-left corner and then click on any user interface element on the web page. The CSS elements are displayed.
        
   • In the Search HTML section, right-click and select Copy > CSS Selector. The CSS elements are copied to the clipboard.
                   
   • Paste the CSS elements into the CSS Selector field.
     
     
5. Select Overlay to replace the page element with a thumbnail of the Experience’s Primary Asset. Optionally Enter a value for the CTA Label, that would be displayed to the visitor on the landing page.   
6. Select No Preview to launch the opt-in form of the Experience’s Primary Asset.
7. Click Add New to add more elements.   
8. Click Save Changes to save the configuration.    
   Important: To preview and test the Experience, refer to Previewing the Experience and Testing the Experience respectively. You can preview or test the Experience before or after publishing the Experience.
   
   

Publishing an Experience

1. Click Publish.    
2. A confirmation pop-up is displayed. Click OK.

   
   

    The Experience is published.
   
   

Related Topics:
On Exit-Intent: Configuring an Experience for User Exiting the Webpage