Website Widget Setup

Embed the AIVO call widget on your site, customize its look, and troubleshoot common issues.

3 min readIntegrations

Getting Your Embed Code

  1. Go to Settings > Widget in your AIVO dashboard.
  2. Your unique embed code is displayed. It looks like this:
html
<script src="https://widget.aivo.bz/v1/loader.js"
  data-aivo-id="YOUR_BUSINESS_ID"
  data-aivo-color="#10b981"
  data-aivo-position="bottom-right">
</script>
  1. Click Copy Code.
  2. Paste it into your website's HTML, just before the closing </body> tag.
  3. Save and publish your site.

Platform-Specific Instructions

  • WordPress: Go to Appearance > Theme Editor > footer.php. Paste before </body>.
  • Shopify: Go to Online Store > Themes > Edit Code > theme.liquid. Paste before </body>.
  • Wix: Go to Settings > Custom Code > Add Code. Choose "Body - end."
  • Squarespace: Go to Settings > Advanced > Code Injection > Footer. Paste the code.

Customizing Colors and Position

Colors

Change the data-aivo-color attribute to match your brand:

html
data-aivo-color="#FF6B35"   <!-- orange -->
data-aivo-color="#2563EB"   <!-- blue -->
data-aivo-color="#7C3AED"   <!-- purple -->

Or use the visual color picker in Settings > Widget > Appearance.

Position

Choose where the button appears:

html
data-aivo-position="bottom-right"  <!-- default -->
data-aivo-position="bottom-left"

Additional Options

html
data-aivo-label="Talk to us"       <!-- button text -->
data-aivo-size="large"             <!-- small, medium, large -->
data-aivo-hide-on-mobile="false"   <!-- show/hide on mobile -->

Testing the Widget

  1. Open your website in a browser.
  2. Look for the call button in the corner you selected.
  3. Click it and allow microphone access when prompted.
  4. Speak a test question and verify the AI responds.
  5. Check the call in your AIVO dashboard under Calls.

Tip: Test in an incognito window to avoid cached versions of your site.

Troubleshooting Common Issues

Widget Does Not Appear

  1. Check placement - The script must be inside <body>, ideally just before </body>.
  2. Check for JavaScript errors - Open your browser's developer console (F12) and look for red error messages.
  3. HTTPS required - The widget only loads on secure (HTTPS) pages.
  4. Ad blockers - Some ad blockers may prevent the widget from loading. Test with extensions disabled.
  5. Caching - Clear your browser cache or test in incognito.

Microphone Permissions

If callers cannot speak:

  1. A browser popup should ask for microphone permission. Make sure they click Allow.
  2. If the popup was dismissed, they can re-enable it:
  • Chrome: Click the lock icon in the address bar > Microphone > Allow.
  • Safari: Safari > Preferences > Websites > Microphone > Allow for your site.
  • Firefox: Click the lock icon > Permissions > Microphone > Allow.

Browser Compatibility

The widget works in:

  • Chrome 80+ (recommended)
  • Safari 14+
  • Firefox 78+
  • Edge 80+

Not supported: Internet Explorer, very old mobile browsers.

Audio Quality Issues

  • Use headphones to prevent echo.
  • Ensure a stable internet connection (at least 1 Mbps up/down).
  • Close other tabs or apps using the microphone.
  • If on Wi-Fi, try moving closer to the router.

Was this article helpful?

Previous
Zapier Integration