Synova Connect

Website call widget

Add a click-to-call button to your website so visitors can talk to your Synova Connect receptionist from their browser.

The Website Call Widget (also called the Website Voicebot) adds a click-to-call button to your website. Visitors click the button to start a voice call with your AI receptionist directly from their browser — no phone number needed.

Where to find it

  • In your Synova Connect dashboard, navigate to Website Widget.
  • Select the Website Voicebot tab at the top of the page.

This opens the embeddable widget customizer, where you design and configure your call button.

Page layout

The customizer is split into two areas: a left panel with configuration tabs and settings, and a right panel with a live preview of your widget and the embed code. Three tabs organize the settings:

  • Presets — Widget type, position type, and pre-made designs
  • Style — Position, icon, button, container, background, border, shadow, animation, and brand icon
  • Text — Primary and secondary text, feedback messages, font size, text color, and floating text

Presets tab

Widget Type — Choose how the call button looks:

  • Contained — A larger widget with a container around the button and text
  • Compact — A smaller, minimal button

Position Type — Choose how the widget behaves on the page:

  • Fixed Position — The widget stays in place while the visitor scrolls
  • Static Position — The widget sits inline with your page content

Pre-made Designs — Select from a gallery of ready-made designs. Clicking a preset applies its colors, layout, and styling instantly. You can further customize any preset using the Style and Text tabs.

Style tab

Position Settings — Available when Fixed Position is selected. Set the widget's placement on the page:

  • Horizontal Position — Left or Right, with a pixel offset
  • Vertical Position — Top or Bottom, with a pixel offset

Icon Settings:

  • Icon Type — Choose from Phone, Microphone, or Voice Note
  • Icon Size — Adjust the icon size in pixels
  • Icon Position — Place the icon at the Start, Center, or End of the button
  • Icon Color — Pick any color using the color picker

Button Style — Customize the call button itself:

  • Width and Height
  • Background — Solid color or gradient (with start color, end color, and direction), plus a separate color shown while in-call
  • Border Radius — Round the corners individually
  • Border — Width, style (solid, dashed, dotted), and color
  • Box Shadow — Enable/disable, blur, spread, color, and opacity

Container Style — Available in Contained mode. Customize the outer wrapper:

  • Width and Height
  • Background — Solid or gradient
  • Border Radius, Border, Box Shadow — Same options as the button
  • Padding — Top, right, bottom, left (with a link toggle to change all sides at once)
  • Side Animation — None, Voice Wave, or Custom Image (with a URL and size control)

Brand Icon — Upload or link to an image (e.g., your logo) that appears alongside the call button.

Floating Text — Enable a line of text beneath the widget (e.g., "Powered by YourBrand"). When enabled, you can set the text content, link URL, font size, and text color.

Text tab

Customize the labels and messages visitors see:

  • Primary Text — The main label on the widget (e.g., your business name)
  • Secondary Text — Supporting text (e.g., "Start a call")
  • Font Size and Text Color
  • Feedback Messages — Messages shown during different call states: a Setting Up message, a Click message, and a Connecting message

Saving and embedding

  • Click Save Changes in the top-right corner of the customizer. Your unique embed code is generated after the first save.
  • The embed code appears in the right panel. Click Copy to copy it to your clipboard.
  • Paste the embed code into your website's HTML, just before the closing `</body>` tag.

If you have not saved yet, you will see a prompt: "Save settings to get your embed code."