Triggering Opt-in Forms Based on CSS Selectors

Author

Stuart McKeown’s Picture

Stuart McKeown

Trigger opt-in forms based on the presence or contents of CSS Selectors on your page.

Our Capture app offers hundreds of ways to trigger opt-in forms based on user activity on your site.

There may be times however when you want the Capture to trigger based on something that's happening on your page.

We wanted to trigger specific opt-ins based on who was the author of specific posts on our blog.

The idea was that you could get notifications from authors you liked rather than having to opt-in to everyone.

Here's what the Capture looks like:

The problem we faced was that we had no easy way (that didn't involve code changes) to let Capture know when to trigger for a specific author.

But, that's where CSS Selectors come in ☺️

What Are CSS Selectors?

Very simply, CSS selectors are patterns used to select the element(s) you want to style on your page.

They offer very granular control over styling individual elements or sweeping changes across your page.

The CSS selector for our Author Name (on this page) is:

body > main > article > header > div.post-detail__info > div > div > div.grid__col--xs-12.grid__col--sm-5.grid__col--md-3 > div.u-vertical-align.u-text-align-left > h4

To get this you can Right Click on the element you want to use, click Inspect Element then click Copy selector:

How Can We Use CSS Selectors to Trigger Based on Author?

Inside Capture we can easily setup a Trigger > Selector rule and insert the copied Selector we obtained from Chrome Inspect.

This will monitor that Selector on the page and allow us to trigger an opt-in form depending on a number of variables.

In this case we want to trigger the opt-in form when the h4 contains the author name Stuart McKeown.

Gleam Capture Rule Selector

The beauty of using rules to trigger these forms is that we can easily duplicate each Capture for every author without making any code changes on our site.

Nifty eh?

What Else Can CSS Selectors Be Used For?

You don't need to limit yourself just to Authors, these Selectors can be used for an entire range of things like:

  • Targeting logged in users
  • Targeting users with products in their cart
  • Targeting users if they have (or haven't) voted on something
  • Targeting users with a specific name only
  • Targeting users on a specific plan

More Capture Tips