Embed Widget

Embed Widget

Add a BuzzTrail widget to your website so visitors can start a meeting directly from any page. Choose from 5 widget types and customize the look to match your brand.

Widget Types

Text Link

A simple styled hyperlink that opens your meeting flow. Blends naturally into your page content.

Simple Button

A call-to-action button with customizable text and colors. Great for landing pages and contact sections.

Avatar Button

A button featuring a thumbnail of your AI avatar. Gives visitors a preview of who they’ll be meeting with.

Video Thumbnail

A looping video preview of your AI avatar displayed in a circular format. The video can play automatically or on hover, drawing attention and encouraging clicks. This is the default widget type.

Floating Bubble

A chat-style widget that sits in the corner of your page — either bottom-right or bottom-left. Always visible as visitors browse, making it easy to start a meeting from any page on your site.

Customization

All widget types support:

• Size — small, medium, or large presets (affects padding, font size, and video dimensions)
• Colors — primary color and text color (uses your brand colors by default)
• Border radius — adjust roundness from square to fully rounded
• Font — choose from 25 fonts or use your system default
• Button text — customize the call-to-action label and optional subtext
• Click behavior — open the meeting in a new tab or the same tab

Responsive Sizing

Widgets adapt to their container with a customizable max-width setting. On smaller screens, the widget scales down gracefully. For best results, place the widget inside a container with appropriate padding and centering.

Getting the Embed Code

1. Go to Personal Link → Embed
2. Choose your widget type
3. Customize the appearance
4. Select your platform: HTML, React, WordPress, Wix, Webflow, Squarespace, Framer, or iframe
5. Copy the generated code
6. Paste it into your website

The preview updates in real-time as you make changes.

Platform-Specific Instructions

HTML

1. Open your website editor or HTML file
2. Paste the code where you want the widget to appear
3. Save and publish your changes

Tip: Place the code near the closing </body> tag for best performance.

React

1. Create a new component file (e.g., BuzzTrailWidget.tsx)
2. Paste the code as your component’s return value
3. Import and use <BuzzTrailWidget /> where needed
4. Adjust styles to match your design system

Tip: Works in both App Router and Pages Router. For video widgets, the inline script handles play-on-hover automatically.

WordPress

1. Edit your page and click ”+” to add a block
2. Search for Custom HTML and add it
3. Paste the code and click “Preview” to test
4. Update/Publish the page

Warning: Use a “Custom HTML” block in the block editor. Don’t paste into a Paragraph block. For page builders: Elementor → “HTML” widget | Divi → “Code” module | Beaver Builder → “HTML” module.

Wix

1. In Wix Editor, click “Add Elements” (+) in the left toolbar
2. Select Embed and Social then Embed HTML
3. Click “Enter Code” and paste the code
4. If a cookies dialog appears, choose the appropriate option for your site
5. Click “Update” at the bottom to apply
6. Drag to position and resize the element
7. Click “Publish” in the top right

Warning: Paste the code in an “Embed HTML” element (Add → Embed → Custom Embeds → Embed HTML).

Webflow

1. In Webflow Designer, press “A” or click ”+” to add elements
2. Under Components, find Embed and drag it to your page
3. Click the embed, then click the </> icon to edit code
4. Paste the code and click “Save & Close”
5. Style the container (padding, margins) in the Style panel
6. Publish your site

Warning: After pasting, enable “Run scripts” in the embed element settings for video playback. Tip: Place the embed inside a div for easier positioning and responsive control.

Squarespace

1. Edit your page in Squarespace
2. Hover where you want the widget and click ”+”
3. Select Code from the block options
4. Set mode to “HTML”, paste the code
5. Click outside to save, then publish

Warning: Code blocks require a Business or Commerce plan. On Personal/Basic plans, use a Button or Text Link widget type instead.

Framer

1. In Framer, click ”+” to add elements, then search for “Embed”
2. Drag the Embed component to your page
3. Paste the code in the “Embed” field (HTML tab)
4. Resize the container to fit your widget
5. Publish your site

Warning: Scripts may not run in preview mode. Publish your site to test video playback. Tip: For site-wide widgets, use Project Settings → Custom Code instead.

iframe

1. Copy the iframe code
2. Paste it where you want the meeting widget
3. Adjust width and height as needed
4. Users can join meetings directly on your site

Warning: Iframe embeds require camera and microphone permissions. Most browsers restrict these in cross-origin iframes unless your site uses HTTPS. This works best for dedicated meeting pages.

Theme Matching

When you select a platform, the generated code uses CSS that works well with that platform’s styling system. Your brand colors are applied as defaults, so the widget matches your site out of the box. You can override individual colors in the customization panel.

AI Code Instructions

For developers integrating the widget into a custom site, use the AI Code Instructions feature:

1. Click Copy AI Prompt in the embed settings
2. Paste the prompt into your AI coding tool
3. The prompt includes your widget configuration, brand settings, and platform-specific guidance
4. Your AI coding assistant will generate the integration code tailored to your project

This is especially useful for matching the widget to your existing design system, handling dark mode, and following your project’s coding conventions.

---

Questions? Contact hello@buzztrail.ai for assistance.