Widgets Overview
Ambassador widgets are embeddable components you can add to your website, landing pages, or advocate portal to bring your referral and loyalty program directly into the customer experience. From sharing buttons to reward catalogs to loyalty progress bars, widgets let advocates engage with your program without ever leaving your site. 🧩
Where to Find the Widget Editor
Navigate to Website / Widgets in your Ambassador admin. From here you can create new widget pages, add widget components, configure their settings, and style them to match your brand — all through a no-code drag-and-drop editor.
How Widgets Work
Each widget is a self-contained component that handles its own data fetching, display logic, and responsive behavior. You configure the widget in Ambassador's editor, copy the embed code, and paste it into your website or landing page. The widget renders dynamically — it recognizes logged-in advocates and displays personalized data like their unique referral link, reward balance, or tier status.
Widgets can be embedded on:
- Ambassador-hosted landing pages (built and hosted directly in Ambassador)
- Your own website pages (via embed script or iframe)
- Wordpress sites (using the Ambassador plugin or embed code)
Types of Widgets
Sharing & Referral Widgets
-
Enroll & Share Widgets — The core referral widget. Lets advocates sign up for your program (or log in if already enrolled) and immediately access their unique referral link with social sharing buttons (WhatsApp, Facebook, Twitter, copy link, etc.).
- Referred (Prospect) Widgets — Shown to people who clicked a referral link. Captures their email, applies a referral code, and can display a welcome offer or coupon code to the referred visitor. This is typically placed on your product, sign-up, or checkout page.
Advocate Portal Widget
Loyalty Widgets
- Loyalty Badges Widget — Displays collectible achievement badges the advocate has earned.
- Loyalty Tiers Widget — Shows program tier levels, thresholds, and benefits.
- Loyalty Tasks Widget — Shows actionable tasks the advocate can complete to earn points or rewards.
- Loyalty Progress Bar Widget — Shows the advocate's current tier and progress toward the next tier.
- Loyalty Steps Widget — A static, configurable how-it-works guide (e.g., "Join → Share → Earn").
Rewards Widgets
- Rewards Catalog Widget — A browsable storefront where advocates can view and redeem available rewards directly. Includes two-factor verification for security.
- Rewards Balance Widget — Displays the advocate's current reward balances (cash, points) in a stat-card grid.
Styling & Customization
Every widget is fully customizable through the editor's built-in CSS tools. You can adjust fonts, colors, button styles, spacing, card sizes, and more — no coding required for most changes. For advanced customization, you can write custom CSS directly in the editor.
All widgets are responsive by design — they automatically adapt to different screen and container widths. Always preview your widget at multiple sizes before publishing.
Installing Widgets on Your Website
- Build and configure your widget in the Ambassador widget editor.
- Click Get Embed Code to copy the widget's embed snippet.
- Paste the snippet into your website's HTML where you want the widget to appear.
- For Wordpress sites, use the Ambassador plugin or paste the embed code in a Custom HTML block.
Make sure your Ambassador domain script is loaded on the page before any widgets — it handles authentication and personalization for logged-in advocates.
Good to Know
- Widgets that show personalized data (like referral links, balance, or tier status) recognize advocates who are logged in via Ambassador's session cookie. Non-logged-in visitors see a generic or sign-in state.
- You can have multiple widget pages for different use cases — one for your main referral program, one for a loyalty portal, one for a specific campaign landing page.
- Smart Redirects and Smart URLs work with widgets — clicks tracked through widget share buttons include channel attribution data.
- Related articles: Landing Pages Overview, Smart Redirects, Smart URLs, Rewards Widgets, Loyalty Widget Templates, Rewards Catalog (Storefront)