Set up Attentive’s sign-up unit trigger

Updated March 27, 2025 20:57

You can use conditional logic to control when the Attentive sign-up unit is triggered and appears on your website. For example, with this trigger, you can configure a sign-up unit to be shown when a button is clicked.

Note: Unlike standard Attentive sign-up units, which use display rules (device type, page view, session, etc.) to determine if a sign-up unit is shown, Attentive sign-up units called by the trigger function are always displayed when triggered, regardless of any display rules.

Before you begin

Before setting this up, contact our White Glove team (whiteglove@attentivemobile.com) to discuss your specific use case. They can provide guidance on the best setup to suit your organization’s needs. They can also disable the auto-load functionality for your Attentive sign-up unit, if needed. As a note, you’ll need to set up this function on your website.

Step 1. Set up the function to trigger Attentive sign-up units

To set the Attentive sign-up units to only show when called, use the following function:

window.__attentive.trigger()

The trigger function is typically used in conjunction with an event listener. For example, you may want to set up an event listener for when a user clicks the submit button on another vendor’s email sign-up unit. When that occurs, the event listener can then run the Attentive function to show the SMS sign-up unit.

If you want a sign-up unit to be displayed when a user clicks a button, follow these steps:

Create or clone a separate version of the fullscreen sign-up unit to render when the user clicks the button (one for mobile, one for desktop).
Add a URL contains display rule to the sign-up unit to show the unit on URLs that contain any value. The specific value you use for the display rule doesn’t matter (for example, it could be something like attn_trigger_test). This prevents the unit from auto-loading on the page, allowing the trigger function to control when the unit appears.
Set up an event listener for when a user clicks the button.

Run this function when the button-click event listener is tripped:

if(window.innerWidth >= 760){

//call the desktop creative

window.__attentive.trigger(null,null,null,<desktop_creative_id>)

} else {

//call the mobile creative

window.__attentive.trigger(null,null,null, <mobile_creative_id>)

}

The new/cloned creative_ids are placed where specified in the above snippet.

Step 2. Test the sign-up unit trigger

After you implement the Attentive tag in your testing environment, you can test the Attentive sign-up unit in the browser console before pushing it to production. To do so, complete the following steps:

Open the Chrome browser and go to your website.

Note: If the Attentive sign-up units are allowlisted on a specific URL, make sure that's the page you open:
(e.g., https://www.yourwebsite.com/?utm_source=attntest)
Right-click (or secondary-click) the page and select Inspect.
The Developer Tool appears on the right-side of the page.
(Optional) Click the mobile icon in the top-left corner of the Developer Tool to preview your website on a mobile device.
Click Console and enter the following code:
```
window.__attentive.trigger()
```
Press Enter.
One of the following actions occurs:
- If the sign-up unit is properly configured, it appears on your website (regardless of any display rules).
- If you see an error in the console, the trigger function may be firing before the Attentive tag finished loading. You can set the function to trigger on a delay by adding:
```
setTimeout( () => window.__attentive.trigger(), 500)
```

(Optional) Customize the sign-up unit trigger

You can customize the trigger to send data that isn't being captured through the Attentive sign-up unit to Attentive. Or, you can customize the trigger to define when sign-up units should appear.

Note: If you're customizing the function, it should always have four fields present, even if some of them are null. If you're not using a specific field, you must set it to null and remove the quotes from that specific field.

To customize the sign-up trigger, use the following function:

window.__attentive.trigger("<filter>", "<client_id>", "<email>", "<creative_id>")

See the following table for definitions of each field in the function:

Field	Description	Example	Notes
`filter`	Use this field to differentiate and display different Attentive sign-up units, as they’ve been configured in your account.	`True`	Work with the White Glove team to set this up because the engineering team at Attentive needs to configure it. For example, we can set `True` to map to sign-ups in group A and `False` to map to sign-ups in group B. This is useful if you want to run an A/B test outside of what Attentive offers out-of-the-box or if you want to be able to control the distribution on your end.
`client_id`	This is the unique identifier for the user from the browser.	`99001-99001-99001-99001`	The specified user-defined ID is tied to the associated subscriber in Attentive. You should include this field in the function if you utilize internal IDs for tracking distinct users. This is not equivalent to Attentive’s visitor ID.
`email`	The email address of the subscriber captured	`test@attentivemobile.com`	This email address is mapped to a subscriber ID in Attentive.
`creative_id`	Use this field when you need to display a specific sign-up unit and you need it to show every time it's called.	`1a2b3c4d5e`	Specifying a `creative_id` enforces showing that specific sign-up unit each time it’s called. The sign-up unit with that ID is displayed every time the function runs, regardless of the sign-up unit’s display rules or whether the user has already signed up for SMS. For example, you may include a `creative_id` if you want a specific sign-up unit to show every time a user clicks a certain button on your website. Contact our White Glove team to retrieve the relevant IDs.

Articles in this section