CSML Studio
  • Introduction
  • 🦜Getting started
    • Create Your First Bot
    • The Dashboard
    • AI & Natural Language Processing
      • AI Rules
      • Configuring a NLU Provider
    • Apps and Integrations
      • Authoring Custom Apps
      • CSML Integrations
      • Tools and utilities
      • Preprocessing
    • Livechat
      • Chatwoot
    • Bot Configuration Options
    • Authenticating Users
    • 💻CSML Language Reference
  • 🔌Studio API
    • Getting Started
    • Authentication
    • Studio CLI
    • API Reference
      • Chat API
      • Broadcasts API
      • Bot API
      • Conversations API
  • 📱Channels
    • Introduction
    • Assistant
      • Installation
      • Configuration
      • Customization
      • Widget
      • Message Formats
    • Workplace Chat
      • Installation
      • Uninstallation
      • Configuration
      • Features and message formats
    • Microsoft Teams
      • Installation
      • Features
    • Google Chat
      • Installation
      • Features
    • WhatsApp
      • Installation
      • Features and Limitations
    • Telegram
      • Installation
      • Features
    • SMS (with Twilio)
      • Installation
      • Features and Limitations
    • Slack
      • Installation
      • Message formats
      • Features
    • Callbots (with Twilio)
      • Installation
      • Features and Limitations
    • Amazon Alexa
      • Installation
    • Google Assistant
      • Installation
    • Messenger (legacy)
      • Installation
      • Configuration
      • Features
      • Message formats
    • Instagram (legacy)
      • Installation
      • Configuration
      • Features
    • Webapp (legacy)
      • Installation
      • Configuration
      • Customization
      • Chatbox
      • Message Formats
Powered by GitBook
On this page
  • Installation
  • Adding a Custom Greeting
  • Optional Attributes
  • data-position
  • data-metadata
  • data-logo-url
  • data-launcher-fill, data-launcher-background
  • data-force-open
  • data-ref

Was this helpful?

Export as PDF
  1. Channels
  2. Assistant

Widget

The Assistant channel also comes with a configurable website plugin (called the Widget) that can be added to any website by adding a single line in your source code. The Widget will then appear as a small bubble in the bottom-right corner of your site for every visitor.

Installation

Simply add the following line of code in your source code, just before the closing </body> tag (replace it with the actual line that you can find in your Webapp configuration panel):

<script
  src="https://widget.csml.dev/script.min.js?token=ASSISTANT_TOKEN"
  id="clevy-widget"
  async>
</script>

Once this is done, a chat bubble will appear as follows on every page where that code is included.

Adding a Custom Greeting

The Widget lets you configure a custom popup message to help you engage more actively with your customers. You can even have default greeting messages depending on the page where the widget is loaded! Here is how it works:

  • Greetings are matched with their page based on the URI. The first message that matches the URI is the one that will be displayed. We support wildcards * and ** to make it more versatile!

  • To display a message on all pages, use /** as the URI.

  • If you want to target one specific page, use its URI, i.e /about-us/the-team

  • You can also target all subpages of a directory with *: /about-us/* will match /about-us/the-team and /about-us/the-company

  • The ** wildcard will also match any subdirectory: /about-us/** will match /about-us/team/europe

Optional Attributes

<script
  src="{WIDGET_URL}"
  id="clevy-widget"
  data-position="left"
  data-metadata="%7B%22firstname%22%3A%22Jane%22%2C%22email%22%3A%22jane.doe%40company.com%22%7D"
  async>
</script>

data-position

By default, the widget will be displayed on the right side of the screen. To display the widget on the left instead, simply add data-position="left".

data-metadata

For example: data-metadata="%7B%22email%22%3A%22jane.doe%40company.com%22%7D"

data-logo-url

You can configure a custom image to be used as the widget logo by setting this parameter to the URL of your image. You can use a transparent png or a svg to achieve this effect below, or directly use a square image (it will be rounded automatically) without a transparent background to use as the logo.

For example: data-logo-url="https://cdn.clevy.io/clevy-logo-square-white.png"

data-launcher-fill, data-launcher-background

These two parameters let you change the fill color of the default icons, as well as the background for the launcher button.

Any valid CSS value for these elements is accepted. The default values are:

<script src="{WIDGET_URL}"
  id="clevy-widget"
  data-launcher-fill="#ffffff"
  data-launcher-background="linear-gradient(135deg, #4f89fc 0, #1965ff 51%, #104dc7 100%)"
  async></script>

data-force-open

Force the widget to open as soon as the script is loaded. Not recommended as it might be a bit agressive for the visitors of the page, but may be useful in some cases!

<script src="{WIDGET_URL}"
  id="clevy-widget"
  data-force-open="true"
  async></script>

data-ref

<script src="{WIDGET_URL}"
  id="clevy-widget"
  data-ref="someRefParam"
  async></script>
PreviousCustomizationNextMessage Formats

Last updated 2 years ago

Was this helpful?

Several configurations are available as to maximize compatibility across browsers.

To add custom metadata in a widget (), you need to add a data-metadata attribute to the widget initialization script tag that contains the encoded (with ) JSON string of the metadata you want to inject.

Set the Assistant's to trigger a specific flow or step.

📱
standard HTML data attributes
see this page for more information about injecting metadata in the assistant
javascript's encodeURIComponent function
ref param