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.
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){
The new/cloned creative_ids are placed where specified in the above snippet.
//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>)
}
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.
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 For example, you may include a |