Introduction to CSS Smart Selectors


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.

Understanding CSS Selectors

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:

  1. A CSS Class
  2. A CSS ID
  3. An HREF Attribute

1. Using a 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. Using an 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 hash tag ("#") for example: #pricingbutton

3. Using an 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 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"]

Using any of these CSS Selectors will trigger a Qualified.com experience, as long as you also have the Qualified.com 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:

  1. Which page on your website would you like your experience to appear for your visitors (Pricing, Products, Contact Us) and
  2. Where to place your unique CSS selector on that page if you don’t already have one and
  3. Make sure you have Qualified.com JavaScript 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.

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.

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.com to trigger a specific experience.

Talk to sales button with ID example.

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:

Talk to sales button using a unique HREF attribution.

If you have Qualified.com JavaScript on your page and the experience trigger set up, we'll now look for both and 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 add a new Experience under the Manually-Triggered Experience option in the Experience Builder as shown below.

Manually Triggered Experienced.

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

Class selector as manual trigger.

Using the CSS ID selector syntax: #contact-sales

ID selector used as manual trigger.

Using the CSS HREF attributed selector syntax: [href="qualified.com/experience123]

HREF used as manual trigger.

From here, you can create any experience you'd like and we've included an example below to help guide you.

Experience example for triggered CSS selector

Summary

There are two types of experiences you can create within Qualified:

  1. Automatically-Triggered Experiences on the website
  2. Manually-Triggered Experiences when a visitor clicks on a website element or submits a form

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.

By adding your Qualified.com JavaScript to your site and creating a Smart Trigger based off of a CSS element, you can create a unique experience for your visitors as soon as they click!

Next Steps

Request a live demo

See Qualified in action on your website. Request a live demo and one of our reps will contact you immediately, or talk to us right now.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Free custom demo
Live on your site