How To Add an Embedded Voice AI Widget in Tekmatix for Seamless Customer Interaction

Embedding a Voice AI widget directly into your website or funnel allows you to create a natural, interactive experience for visitors. Unlike sticky or floating chat buttons, embedded widgets integrate directly into your page content perfect for hero sections, CTAs, or form blocks.

This guide shows you step-by-step how to set up an embedded Voice AI widget, optimize its appearance, and deploy it effectively on your Tekmatix website or funnel.

Why Embedded Voice AI Widgets Are Important

• Seamless UX: Visitors interact with your AI chat without a floating pop-up interrupting their browsing experience.

• Custom Placement: Place your widget exactly where you want it in your page layout.

• Flexible Styling: Align the widget with your brand, messaging, and design.

• Higher Engagement: Integrated placement often increases interaction rates compared to sticky buttons.
  

Sample Scenario

Scenario:
Your Tekmatix e-commerce site has a hero section highlighting a new product launch. You want visitors to ask questions directly under the product image without opening a separate chat window.

Solution:

1. Use the Embedded/Inline Voice AI widget and place it under the hero section.

2. Customize the button text to “Ask about this product”.

3. Deploy it via a code block in your funnel or website.

Outcome: Visitors interact naturally while exploring the product, increasing engagement and reducing bounce rates.

Step-by-Step Guide: Creating an Embedded Voice AI Widget

Step 1: Access the Chat Widget Builder

1. Go to Websites & Funnels > Chat Widget in your Tekmatix sub-account dashboard.

2. Open an existing widget or click + New.

3. Select Voice AI as the chat widget type.

4. You’ll see four main tabs: Style, Chat Window, Messaging, and Agent.

   
   

   
   

Step 2: Choose Embedded/Inline Placement

1. Navigate to the Style tab.

2. Open Widget Placement.

3. Select Embedded/Inline.
   

   

Notes:

• The preview updates to show the widget inline.

• Only Avatar and Theme styling options are shown.

• Widget Position grid and Contact Form toggle are hidden since they don’t apply to embedded widgets.
  
  

Step 3: Customize Your Widget Appearance

1. Go to the Chat Window tab.

2. Edit the Button Text (e.g., “Talk to our AI” or “Ask a Question”).

3. Optionally, adjust branding elements like business name or compliance footer.

4. Use the preview to ensure the design looks natural inline with your page.
   
   

   

Step 4: Generate the Embed Code

1. Click Get Code in the top-right corner.

2. Copy your unique Embed Code Snippet.
   

   

Step 5: Embed the Widget on Your Website or Funnel

1. Navigate to the page or funnel where you want the widget.

2. Add a Code Block element:

   • For funnels: Websites & Funnels > Funnels > Edit Page → Quick Add > Custom > Code.

     
     

3. Paste the Embed Code into the editor.

   

4. Click Save and Publish.

   

Result: The widget appears inline as part of your page content, fully mobile-responsive and interactive.\

Tips & Best Practices

• You can place multiple embedded widgets on a single site or funnel, all connected to the same Voice AI agent.

• Combine embedded and sticky widgets across different sections for maximum engagement.

• Ensure button text is clear and action-oriented to increase interactions.

• Test mobile responsiveness to confirm the widget scales properly on smaller screens.
  

Summary

Using the Embedded/Inline Voice AI Widget in Tekmatix, you can:

• Place the widget anywhere on your site or funnel.

• Create a seamless, integrated customer experience.

• Maintain full control over styling and placement for brand consistency.
  

This setup is ideal for businesses looking to make the AI chat experience feel like a natural part of their website, rather than a separate pop-up.