Add a Voice AI Chat Widget directly inside your website or funnel content for a more natural, on-page conversation experience. SourCherry’s Embedded/Inline placement gives you more control over where the widget appears, making it easier to match your layout, branding, and conversion flow. This setup is ideal for businesses that want Voice AI to feel like part of the page instead of a floating element.
TABLE OF CONTENTS
What is the Embedded Voice AI Widget?
An Embedded Voice AI Chat Widget is a Voice AI widget that appears inline within your website or funnel content instead of floating in the corner of the screen. This gives you more flexibility in how you present Voice AI on key pages, such as landing pages, lead capture pages, service pages, or offer sections.
Unlike the default Sticky placement, Embedded/Inline placement lets the widget become part of the page layout. This can create a more seamless and immersive visitor experience while keeping the conversation flow aligned with the surrounding content.
Key Benefits of Embedded Voice AI Chat Widgets
Embedded Voice AI Chat Widgets help you create a more intentional on-page experience by placing the conversation exactly where visitors are most likely to engage.
- Inline placement flexibility: Add the Voice AI widget directly inside page sections instead of relying on a floating chat bubble.
- More natural user experience: Make conversations feel like part of the website content rather than a separate overlay.
- Cleaner page design control: Align the widget with your funnel or website layout for a more branded experience.
- Mobile-ready experience: The embedded widget is responsive by default for mobile visitors.
- Flexible deployment options: Use multiple inline placements and combine embedded and sticky widget experiences on the same website or funnel.
Where Embedded Voice AI Chat Works Best
Embedded Voice AI Chat can be used on:
Funnels
Websites
Landing pages
Custom HTML sites
Other supported pages where Chat Widgets can be installed
The embedded widget is also mobile responsive by default, so it adjusts automatically for smaller screens while remaining part of the page content.
How to Create an Embedded Voice AI Chat Widget
Proper setup ensures the widget appears exactly where you want it and behaves consistently across your website or funnel.
Step 1: Create a New Chat Widget
Go to Sites → Chat Widget then click + New or open an existing widget.
Step 2: Select Voice AI Chat
Choose the Voice AI chat option.
Step 3: Set Widget Placement to Embedded
Navigate to the Style tab
Under Widget Placement, choose: Embedded / Inline (Renders inside content)
This ensures the widget will appear within your page layout instead of floating on the screen.
Step 4: Customize Your Widget
Use the available styling options to match the widget to your page design.
For embedded Voice AI widgets, configure the following options:
1. Under Widget placement, choose how the Voice AI widget appears on your website:
- Sticky: Keeps the widget fixed in a page corner.
- Embedded/Inline: Renders the widget inline within your page content.
2. For Embedded/Inline widgets, configure the Display Mode:
- Avatar: Shows a static visual representation.
- Visualiser: Shows dynamic voice-based visual cues. When you select Visualiser, choose an Interface Size: Small, Medium or Large
3. In the Chat Window tab, edit the Button Text, this appears below the avatar in the inline layout.
- Example: Change “Call us here” to “Talk to our AI” or “Ask a Question.”
Optionally, open Additional Options to adjust branding elements like the business name or compliance footer. The preview on the right updates in real time to show your embedded widget design.
Click here for more information on customizing chat widgets.
Step 5: Generate the Embed Code
Once your widget looks good, click the Get Code button in the top right corner. A pop-up window will appear with your unique Embed Code Snippet. Click Copy to save it to your clipboard.
Step 6: Embed the Widget on Your Website or Funnel
You can place the widget anywhere on your site or funnel using a Code Block element.
To embed in a Funnel:
- Go to Sites > Funnels and open the funnel page where you want to add the widget.
- Click Edit Page.
- On the left sidebar, search for “Code” under Quick Add > Custom and drag the Code Element onto your page.
- Click Open Code Editor.
- Paste the Embed Code you copied from the Chat Widget Builder.
- Click Save, then Publish your page.
Once published, the Voice AI widget will appear embedded inline just like any other content block.
Important Behavior Notes
- The embedded widget is fully mobile-responsive, it resizes automatically on smaller screens.
- Some customization options are disabled in Embedded/Inline mode because they only apply to floating widgets. Examples include widget position and contact form toggle settings.
- Display Mode options are currently optimized for Voice AI experiences.
- You can have multiple embedded widgets on the same site or funnel, all linked to the same Voice AI agent.
- You can even use a mix of embedded and sticky widgets across different sections for maximum engagement.
Best Practices
A well-placed widget can support conversions without interrupting the page experience. The goal is to make chat feel helpful and timely, not distracting.
Place the widget near high-intent content such as forms, offers, booking areas, or support prompts.
Match the widget branding to the page for a more seamless appearance.
Test spacing and alignment so the widget does not look cramped inside narrow sections.
Review mobile layout after publishing to confirm readability and spacing.
Keep intro and acknowledgment messages clear and action-oriented.
Frequently Asked Questions
Q: Where should I place the embedded widget on my page?
Good placement options include hero sections, offer sections, lead capture areas, service pages, and other high-intent areas where visitors are likely to engage.
Q: Why did some customization settings disappear after selecting Embedded/Inline?
Some controls are automatically hidden because they only apply to floating widgets. In Embedded/Inline mode, SourCherry shows only the settings that are relevant to inline placement.
Q: Can I use the Embedded/Inline placement for Live Chat widgets as well?
Yes, embedded/inline support is available for Live Chat. For more information, click here.