Embed Widgets on a Page

With the script installed, you add a widget by dropping a container element where you want it to appear.

Basic placement

html

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

The widget renders inline, right where you place the div — no iframe, and no external stylesheet to conflict with your site.

Set where referral links land

When someone signs up as an advocate through the widget, the share link they receive points to your homepage by default. To send that referral traffic somewhere specific instead, set data-al-path to the destination path.

html

<!-- Advocates who sign up at this widget get share links that land on /services -->
<div data-al-widget data-al-path="/services"></div>

This is useful when you want advocate referrals directed to a particular landing page — a campaign page, a flagship product, or a seasonal offer — rather than the homepage. Omit the attribute and share links fall back to your homepage.

Multiple widgets on one page

Place as many containers as you like; each renders independently.

html

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

Customizing appearance with CSS

The widget inherits your site’s fonts and respects your page styles. For finer control, target its classes:

css

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

.al-widget input {
  border-radius: 8px;
}

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

For headline, button text, colors, and messages, use the dashboard instead — see Widget Settings.

On WordPress?

Use the shortcode rather than a div:

[advocate_loop_widget]

See Shortcodes.

Troubleshooting

Widget not appearing

• Confirm the al.js script tag is on the page and the Brand ID is correct
• Check that data-al-widget is spelled correctly
• Open the browser console and look for [AdvocateLoop] messages
• If using GTM, make sure the script fires before DOMContentLoaded

Previewing each mode

• Visit a normal page URL to see share mode
• Visit with ?ref=YOURCODE to see claim mode

Form submission fails

• Make sure your site’s domain is allowed for your brand, under Admin → Domains