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
  • Referral Parameter
  • Injecting Conversation Metadata
  • Customizing the UI

Was this helpful?

Export as PDF
  1. Channels
  2. Assistant

Customization

PreviousConfigurationNextWidget

Last updated 2 years ago

Was this helpful?

Referral Parameter

You can launch a specific flow (and step) instead of the default Welcome Flow when loading the Assistant by providing a ref query parameter in its URL.

To force the launch of a specific flow when opening the Assistant URL, use the following special syntax:

# will redirect to the step NAME_OF_STEP in the flow called NAME_OF_FLOW
https://chat.csml.dev/s/abc12345678901234?ref=target:NAME_OF_STEP@NAME_OF_FLOW

# or, if no step is provided, the `start` step will be used
https://chat.csml.dev/s/abc12345678901234?ref=target:NAME_OF_FLOW

Injecting Conversation Metadata

By default, the Assistant channel does not include any specific context about the conversation (see the _metadata object ). In some cases, it can be useful to load the Assistant (or Widget) with pre-existing metadata.

Some common scenarios:

  • the bot is loaded in a website where the user is already known: in that case, we may be interested in injecting the user's context (name, email...) inside the conversation.

  • the user is authentified on the parent website: in that case, we may want to inject an authentication token into the user's conversation for subsequent calls.

  • the same bot is used across several websites and we want to know which website the user is currently visiting: in that case we can inject a unique website identifier into the conversation.

The injected data is available in the _metadata global variable, available in every flow. The code of the example above is:

start:
  say "Hi {{_metadata.firstname}}"
  say QuickReply(
    "Your email address is: {{_metadata.email}}. Do you confirm?",
    buttons=[Button("yes"), Button("no")]
  )
  hold
{ASSISTANT_URL}?metadata=%7B%22firstname%22%3A%22Jane%22%2C%22email%22%3A%22jane.doe%40company.com%22%7D

Customizing the UI

You can change the appearance of the Assistant by visiting the Design tab of the configuration panel. This lets you have even more control over the final experience for your end users, and match your own branding even better!

Many elements are configurable:

  • Chatbot avatar, header card color and background image

  • User bubble colors

  • Hiding the CSML branding

  • Disabling the speech input

  • And many others!

To add custom metadata in your Assistant, simply add the encoded (with ) JSON string of the metadata you want to inject to the query parameters of the URL. The URL of the Assistant in the example above would be:

📱
javascript's encodeURIComponent function
documentation
In this example, the chatbot already knows the user's email address and first name