Skip to content

widget.mdx

Latest commit

 

History

History
107 lines (91 loc) · 2.95 KB

widget.mdx

File metadata and controls

107 lines (91 loc) · 2.95 KB
title Embed a Widget
icon message-smile
description Embed a Simli Avatar on your website in a few minutes using Simli Auto. <br></br> Just navigate to the widget section after clicking your avatar and you'll find readymade widget code you can add to any html page!

Features

Start using the Simli Widget on your website.

Supported platforms

  • WordPress, Shopify, Squarespace, Wix, Weebly and any website that supports HTML

Customize widget appearance

The Simli Widget can be customized using various parameters in the embed code. Here are the available customization options:

<simli-widget
  token="your-token"
  agentid="your-agent-id"
  position="relative"
  customtext="Call Agent"
  customimage="https://app.simli.com/images/logo.png"
  overlay="false"
>
</simli-widget>
<script src="https://app.simli.com/simli-widget/index.js" async type="text/javascript"></script>

Parameters

  • token (required): Your Simli API token for authentication.

    Refer to our API doc for retrieving the token
  • agentid (required): The unique identifier of your Simli Agent.

    You can find your agent ID by clicking an avatar

Default Mode

  • position: Controls the widget's position on the page
    • "relative": Positions the widget in the normal document flow
    • "left": Fixes the widget to the left side of the screen
    • "right": Fixes the widget to the right side of the screen
  • customtext: Custom text to display on the widget button
  • customimage: URL to a custom image to replace the default dotted face animation

Overlay Mode (Custom Trigger Button)

  • overlay: Set to "true" to enable overlay mode, which creates a full-screen experience and enables you to customize the trigger button. Create a trigger button with the ID simliOverlayBtn in your HTML
<button id="simliOverlayBtn">Open Widget</button>
<simli-widget
  token="your-token"
  agentid="your-agent-id"
  position="relative"
  overlay="true"
>
</simli-widget>
<script src="https://app.simli.com/simli-widget/index.js" async type="text/javascript"></script>
Start using the Simli Widget on your website. Make sure to re-update the embded code on your website if you update your API Keys or Allowlist.