Set up Attentive’s sign-up unit trigger

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 allow your sign-up unit to appear on the initial page load to capture emails and other specific IDs. After the capture is complete, the Attentive sign-up unit is triggered. As a result, your specific IDs and captured email addresses are forwarded to Attentive to associate them with the subscribers' phone number in Attentive.

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()

This function calls the sign-up unit that's eligible to be shown, based on the display rules set in your Attentive account. The display rules take into consideration the device type, page view, session, URL string, priority, and user fatigue. If a sign-up unit isn't eligible to be shown (e.g., because the user is on a block listed URL), it's not displayed.

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 to have a sign-up unit display when a user clicks a button, follow these steps:

1. 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).
2. Add any random allow list to the separate sign-up units (e.g., attn_trigger_test).
   The trigger then bypasses all display rules and renders the sign-up unit every time a user clicks the button without the need to reload the page. The purpose of this allow list is to prevent it from auto-loading on the page.
3. Set up an event listener for when a user clicks the button.
4. 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:

1. Open the Chrome browser and go to your website.
   
   Note: If the Attentive sign-up units are allow listed on a specific URL, make sure that's the page you open:
   (e.g., https://www.yourwebsite.com/?utm_source=attntest)
2. Right-click (or secondary-click) the page and select Inspect.
   The Developer Tool appears on the right-side of the page.
3. (Optional) Click the mobile icon in the top-left corner of the Developer Tool to preview your website on a mobile device.
4. Click Console and enter the following code:

   window.__attentive.trigger()

5. Press Enter.
   One of the following actions occurs:
   
   • If an Attentive sign-up unit is eligible to be shown, it appears on your website.
   • 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 that 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: