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 or administrators 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 guide, 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.
A CSS (Cascading Style Sheet) Selector is code used on the backend of your website to help you style or link elements on your website.
In this guide, 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:
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
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 hash tag ("#") for example: #pricingbutton
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 become a Qualified.com trigger. Your link can be anything you'd like as it will not go anywhere, but rather just 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="www.qualified.com/triggerexperience123"]
To get started with your Smart Selector, you’ll want to first determine a few things:
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.
One thing you’ll want to note is that 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.
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.com 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:
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 add a new Experience under the Manually-Triggered Experience option in the Experience Builder 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 side bar (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 and we've included an example below to help guide you.
There are two types of experiences you can create within Qualified:
In this guide we've gone over how to create a Manually-Triggered Experience in Qualified using three common CSS selectors: Class, ID, and HREF.