Along with smart forms and smart buttons, you can also manually trigger an experience from a simple piece of code on your website such as a unique URL, CSS class, CSS id, or any other unique attribute you might already have in place.
If you can't quite get the time on your web designer's calendar to add in our smart button code, we recommend using this method to help you trigger an experience on your site without the help of your design team.
In this article, we’ll show you how to use our Smart Selector to trigger any experience on your website and go over to the top three use cases in which you might want to consider putting this into place.
Understanding CSS Selectors
A CSS selector is code used on the backend of your website to help you style or link elements on your website.
In this article, we'll go over three CSS selectors that are the most common and that can be used to manually trigger experiences for your visitors. Those selectors are:
- CSS class
- CSS id
- Href attribute
1. CSS Class Selector
A class selector can appear multiple times within your website, such as a styled button that is used for your forms, navigation, or other calls to action. Since this is often not a unique element on the website, we don't recommend using a class as your first choice for your experience trigger.
For example, if the links on your website all have the class of 'styled-link' and you used this as your experience trigger, that means all links on your site would trigger a Qualified.com experience, rather than linking to the page they were pointed to originally.
A class selector is a name preceded by a full stop (“.”) for example: .styled-link
2. CSS Id Selector
The difference between an id and a class is that an id can be used to identify one element on your website (such as a unique button that appears once), whereas a class can be used to identify more than one which makes it more unique and safer to use as a trigger than a class.
An id selector is a name preceded by a hashtag ("#") for example: #pricingbutton
Note: The id name is case sensitive and the id name must contain at least one character, cannot start with a number, and must not contain whitespaces (spaces, tabs, etc.). Read more on HTML ids.
3. HREF Attribute Selector
Perhaps the most commonly used and most unique selector is the href attribute selector. You'll see this attribute appear on all links on your website as it what tells your browser where to navigate to when a link is clicked. Due to the fact that you can make any link as unique as you'd like (if you're able to add links to your website), this can be the safest selector to trigger your experience from.
For example, if you're using a website template that you cannot edit the HTML or CSS elements of, but you can create a link or a button, this can then be used as an experience trigger. Your link can be anything you'd like, as it will be used to trigger your experience.
An href selector can be any link in between quotes preceded by href= and wrapped in brackets for example: [HREF="chat-now"].
All of these CSS selectors can trigger a Qualified experience, as long as you also have the Qualified JavaScript on the same page as the element.
Getting Started
To get started with your smart selector, you’ll want to first determine a few things:
- Which page on your website would you like your experience to appear for your visitors
- Where to place your unique CSS selector on that page (if you don’t already have one)
- Verify that the Qualified JavaScript is installed on the page.
Your unique CSS selector when clicked will trigger the experience you create specifically for that selector and page. You can use any CSS selector syntax that you'd like.
Note: When you add your CSS selector as an experience trigger in Qualified, any links within that CSS element will no longer work. This allows for Qualified to trigger the experience, while your visitor is still on the page rather than the visitor navigating elsewhere after clicking a link.
Add Your Selector
In most cases, you’ll probably already have a CSS selector on your site to designate a style for an element such as a button, tile, or link. If you don’t, you’ll need to add one in order for the smart selector to work its magic.
We recommend if you don't already have one, creating a unique link that we can use to trigger the experience. Keep in mind, we'll use the link to trigger the experience on the page, so the link will not actually take your visitors anywhere.
For example, your syntax might look something like below if you have an ID on your button element:
Example: #contact-sales is the ID used to style this button and the ID we will use to tell Qualified to trigger a specific experience.
If we want to ensure the experience is only triggered for this specific button, we can alternatively change the link to this button to be something extremely unique to the experience trigger, as shown below:
If you have your Qualified JavaScript snippet and experience trigger set up, we'll now look for both. If anyone clicks on any id on the page with #contact-sales or clicks on a link where the href="qualified.com/experience123," we'll trigger your visitor experience.
Create Your Experience & Trigger
There are two types of experiences you can create within Qualified: those that are automatically triggered on the website and those that are manually triggered when a visitor clicks on a website element or submits a form. In this next step, you’ll want to create a Manually-Triggered Experience in Qualified.
To do this, cruise over to your Qualified.com account and create a new manually-triggered experience, as shown below.
Next, set the trigger in the experience by adding your CSS Selector name as shown below along with the syntax. Once this is added and the experience is turned to active in the Experience Builder sidebar (shown above), Qualified will appear as soon as this element is clicked on your page.
Using the CSS Class selector syntax: .contact-sales
Using the CSS ID selector syntax: #contact-sales
Using the CSS HREF attributed selector syntax: [href="qualified.com/experience123"]
From here, you can create any experience you'd like. We've included an example below to help guide you:
Summary
There are two types of experiences you can create within Qualified:
- Automatically-triggered experiences on the website
- Manually-triggered experiences when a visitor clicks on a website element or submits a form
In this article, we've gone over how to create a manually-triggered experience in Qualified using three common CSS selectors: class, id, and href.
By adding your Qualified JavaScript to your site and creating a smart trigger based on a CSS element, you can create a unique experience for your visitors as soon as they click!
