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:

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 When you specify a creative_id in the function, it ignores all display and fatigue rules. In other words, a sign-up unit displays every time the function runs, regardless of 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

Was this article helpful?
1 out of 1 found this helpful