Skip to main content

​
Overview

SmartAlex Widgets let your website visitors call your AI agent with one click. No phone required - calls happen directly in the browser.

​
Widget Types

​
Click-to-Call Button

A customizable button that opens a calling interface:
  • Floating button (corner of screen)
  • Inline button (within page content)
  • Custom trigger (your own button/link)

​
Embedded Call Widget

A full calling interface embedded in your page:
  • Shows agent avatar and name
  • Call controls (mute, end)
  • Call status indicator

​
Creating a Widget

1

Navigate to Widget Studio

Go to Widgets in your dashboard.
2

Click Create Widget

Click Create Widget to start the configuration wizard.
3

Select Agent

Choose which AI agent will handle widget calls.
4

Customize Appearance

Configure colors, position, and text to match your brand:
  • Button color (hex code or picker)
  • Button text (e.g., “Talk to Alex”)
  • Position (bottom-right, bottom-left, etc.)
  • Icon style
5

Get Installation Code

Copy the embed code to add to your website.

​
Customization Options

​
Appearance

SettingOptions
Primary ColorAny hex color (default: #010033)
Button TextCustom text or icon only
PositionBottom-right, bottom-left, custom
SizeSmall, medium, large
Border RadiusSquare to fully rounded

​
Behavior

SettingDescription
Auto-openAutomatically open on page load
DelayWait before showing button (seconds)
Mobile DisplayShow/hide on mobile devices
Greeting MessageInitial message in chat interface

​
Installation

​
Basic Installation

Add the widget script to your website’s HTML: 
<!-- SmartAlex Widget -->
<script
  src="https://widget.getsmartalex.com/v1/widget.js"
  data-widget-id="YOUR_WIDGET_ID">
</script>
Place this code before the closing </body> tag.

​
Platform-Specific Guides

  1. Go to Appearance → Theme Editor
  2. Select footer.php
  3. Paste the widget code before </body>
  4. Click Update File
Or use a plugin like “Insert Headers and Footers”:
  1. Install and activate the plugin
  2. Go to Settings → Insert Headers and Footers
  3. Paste the code in the “Scripts in Footer” section
  1. Go to Online Store → Themes
  2. Click Actions → Edit code
  3. Find theme.liquid
  4. Paste the widget code before </body>
  5. Click Save
  1. Go to your Wix Editor
  2. Click Add → Embed Code → Custom Embeds
  3. Select Embed a Widget
  4. Paste the widget code
  5. Position the widget and publish
  1. Go to Settings → Advanced → Code Injection
  2. Paste the widget code in the Footer section
  3. Click Save
Add to your main layout or app component:
import { useEffect } from 'react';

export default function Layout({ children }) {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://widget.getsmartalex.com/v1/widget.js';
    script.setAttribute('data-widget-id', 'YOUR_WIDGET_ID');
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return <>{children}</>;
}

​
Live Preview

Widget Studio includes a live preview:
  • See changes in real-time
  • Test on different device sizes
  • Preview light and dark modes
  • Test the calling interface

​
Widget Analytics

Track widget performance:
MetricDescription
ImpressionsTimes widget was displayed
ClicksTimes button was clicked
Calls StartedCalls that connected
Calls CompletedSuccessfully finished calls
Conversion RateClicks to completed calls

​
Best Practices

  • Floating button: Best for most sites, always visible
  • Bottom-right: Standard position users expect
  • Avoid: Covering important content or CTAs
  • Use action-oriented text: “Talk to Us”, “Get Help Now”
  • Keep it short (2-3 words)
  • Match your brand voice
  • Test on actual mobile devices
  • Ensure button isn’t too small to tap
  • Consider hiding on mobile if calls don’t make sense

​
Troubleshooting

  • Check that the script is properly added to your page
  • Verify the widget ID is correct
  • Check browser console for JavaScript errors
  • Ensure the widget is not hidden by CSS
  • Verify the widget’s agent is active
  • Check that microphone permissions are granted
  • Test in an incognito window
  • Try a different browser