Widget Guide

The Advocate Loop widget is an embeddable UI component that handles two flows on your site: letting referred visitors claim their discount, and letting existing customers sign up as advocates to share your brand.

Adding the widget

Basic setup

Add the tracking script and a widget container to your page:

<script src="https://api-production.advocateloop.com/al.js?brand=YOUR-BRAND-UUID"></script>

<div data-al-widget></div>

The widget renders inline where you place the div. No iframe, no external stylesheet conflicts — the widget HTML is injected directly into your page.

Page-specific widget

If you want the widget to behave differently based on the page, use the data-al-path attribute:

<!-- On your services page -->
<div data-al-widget data-al-path="/services"></div>

<!-- On your homepage -->
<div data-al-widget data-al-path="/"></div>

This lets you configure different widget settings per page in the Advocate Loop dashboard.

Widget modes

The widget automatically shows the right view based on the visitor’s context:

Claim mode (referred visitors)

When a visitor arrives via a referral link (?ref=CODE), the widget shows the claim form. The visitor enters their email to claim the referral discount. On submission, Advocate Loop records the visitor’s interest against the advocate’s referral code.

Share mode (advocates)

When a visitor isn’t referred (no referral code), the widget shows the share form. The visitor enters their email to become an advocate and receives their unique referral code and shareable link.

Configuring the widget

Widget settings are managed in the Advocate Loop dashboard under Settings → Widget:

Setting	Description
Headline	The main text displayed on the widget
Description	Supporting text below the headline
Button text	Label for the submit button
Success message	Message shown after successful submission
Discount display	How the discount is described (e.g., “15% off your first order”)
Position	Where the widget renders: inline (default)
Brand colors	Primary color used for buttons and accents
Show/hide branding	Display “Powered by Advocate Loop” (Growth and Premier plans can remove this)

Customizing appearance

The widget inherits your site’s font stack and respects your page’s existing styles. You can further customize it with CSS:

/* Widget container */
.al-widget {
  max-width: 500px;
  margin: 2rem auto;
}

/* Input fields */
.al-widget input {
  border-radius: 8px;
}

/* Submit button */
.al-widget .al-btn-primary {
  background-color: #0f766e;
  border-radius: 8px;
}

/* Success state */
.al-widget .al-success {
  color: #10b981;
}

Multiple widgets on one page

You can place multiple widget containers on the same page. Each one renders independently:

<!-- Widget in the hero section -->
<div data-al-widget></div>

<!-- Widget in the footer -->
<div data-al-widget></div>

Widget events

The widget dispatches custom events you can listen for:

document.addEventListener('advocateloop:claim', function(e) {
  console.log('Claim submitted:', e.detail);
  // e.detail contains: { email, referralCode }
});

document.addEventListener('advocateloop:share', function(e) {
  console.log('New advocate:', e.detail);
  // e.detail contains: { email, referralCode, shareUrl }
});

WooCommerce widget

If you’re using the WooCommerce plugin, the widget is available as a shortcode:

[advocateloop_widget]

Place this shortcode in any page, post, or widget area. The plugin handles all configuration automatically using your dashboard settings.

Troubleshooting

Widget not appearing

• Verify the al.js script tag is on the page and the brand UUID is correct
• Check that the data-al-widget attribute is spelled correctly (no typos)
• Open the browser console and look for [AdvocateLoop] messages
• If using GTM, ensure the script tag fires before DOMContentLoaded

Widget shows wrong mode

• Claim mode only appears when a referral code is stored (from a ?ref=CODE visit)
• Clear cookies and localStorage, then visit without a referral link to see share mode
• Visit with ?ref=TESTCODE to see claim mode

Form submission fails

• Check the browser console for error messages
• Verify your brand’s allowed domains include the current site’s domain
• Confirm the domain is added in the dashboard under Admin → Domains