Chatlayer Documentation
Get in touchAbout Chatlayer
  • Welcome
  • What's new
  • Send feedback
  • start quickly
    • Leadzy tutorial
      • 0. Introduction
      • 1. New bot, new block
      • 2. Understand your users
      • 3. Collect and display user input
      • 4. Steer the conversation with Conditions
      • 5. Empower your bot with Actions
      • 6. Set up a channel and publish your bot
    • Templates
      • Banking
      • E-Commerce Returns
      • E-Bike Shop
      • E-Scooter Support
      • Feedback
      • Find Nearest Location
      • GPT
      • 🆕Gym
      • Job applications
      • Knowledge base AI template
      • Lead generation
      • 🆕NPS
      • Restaurant
      • Retail
  • navigation
    • Analytics
      • Dashboard
      • Customers
      • Conversations
      • User flow
      • Intents
      • 🆕Funnels [Beta]
    • Bot builder
      • Flows
        • Canvas functionalities
        • Collaborate with team members
        • Manage your flows
        • 🆕[Beta] Export and import flows
      • Bot dialogs view
      • Translations
      • Events
    • NLP
      • Dashboard
      • Intents
      • Expressions
      • Entities
      • Train
      • NLP settings
      • Improve
    • Knowledge base AI
      • Add content to your KBAI
      • Build your KBAI flow
      • Use your KBAI source URL in a button
      • Use tags to limit your KBAI content
      • 🆕Use Tables to store your KBAI questions
      • 🆕Manage handover where KBAI is unsatisfactory
    • History
      • Conversations
      • Execution logs
      • Versions
    • Channels
    • Tables
      • Create a table with records
      • Column types
      • Operate on your records
        • Insert record
        • Update record
        • Retrieve record
        • Delete record
      • API
    • Settings
      • Bot settings
      • Offloading
      • Variables
      • Voice
      • Import/Export
  • build your bot
    • Conversation design
      • Plan your bot
      • Conversation design workflow
    • Flow logic
      • Blocks
        • Message
        • Condition
        • Collect input
        • Action
      • Go-to connections
    • 🆕Emulator
    • Tips & best practices
      • Route your flow depending on the time
      • Improve the Not understood block
        • How to create better not understood messages
        • Not understood counter
        • Not understood Google search
      • Go to previous block
      • Recognizing a returning user
      • Skip introduction message
      • Route your flow depending on the channel
      • Reuse flows
      • Connect two bots to each other
  • understand users
    • Natural language processing (NLP)
      • Basic NLP concepts
      • Detect information with entities
        • Match entities
        • Contextual entities
        • System entities
        • Composite entities
      • NLP best practices
        • Word order and diversity of expressions
      • AI intent booster
      • Train your NLP
      • Context
      • NLP import & export
      • Sentiment analysis
    • Languages
      • Supported languages
      • Make your bot multilingual
      • Change language within the conversation
  • set up channels
    • Add a channel to your bot
    • All channels
      • 🚨Facebook Messenger [Deprecated soon]
        • Facebook Admin Removal
        • Facebook Webview Whitelisting
        • Facebook Messenger API updates for Europe
      • 🚨Google Assistant [Deprecated soon]
      • Webhook
      • Web
        • 🚨Web V1 [Deprecated]
          • Customize web widget
          • Live example web widget
        • 🆕Web V2
          • 🆕From Web V1 to V2
          • 🆕Web V2 methods and options
    • Sinch Conversation API
      • Configure your Sinch Conversation API
      • 🆕 Make the most of RCS with Carousels
      • WhatsApp Business API
  • integrate & code
    • API calls
      • Configure your API integration
      • Advanced API features
      • V1 API Reference
      • Custom integrations 101
    • Code editor
      • [Example] Sending data to Airtable (POST)
      • [Example] Retrieving data from Airtable (GET)
      • [Example] Making SOAP requests
    • App integrations
      • Airtable
      • Freshdesk
      • Freshdesk Messaging
      • 🆕Gmail
      • Intercom
      • Mailgun
      • OpenAI: GPT-3, ChatGPT and GPT-4
      • Salesforce
      • 🆕Slack
      • Topdesk
      • Zendesk Support
      • Zendesk Sunshine (beta)
    • 🆕Expression syntax
    • Human handover & live chat
      • Sinch Contact Pro
      • #Interact
      • Genesys Cloud
      • Offloading Webhook
      • Salesforce Service Cloud
      • Sparkcentral by Hootsuite
      • Zendesk Chat
    • Chatlayer messages specifications
  • Publish
    • Publish your bot
      • Publish a flow
  • Analyze & maintain
    • Analytics definitions
    • Data retention
    • Maintenance
    • Session
    • Track events for analytics
  • VOICE
    • 🆕Send bot response as audio
    • Voicebots
      • Create a voicebot
      • Voicebot-specific actions
      • Test your voicebot
      • From chat to voice
  • access & support
    • Identity & Access
      • Single Sign-On (SAML SSO)
    • Billing & subscription
    • Get in touch
    • Chatlayer glossary
    • SaaS Regions & IP Ranges
    • Status
    • Debug your bot
      • No correct response
      • Collect input not working
      • Video isn't working
Powered by GitBook
On this page
  • Create your Web widget
  • Customize your Web widget
  • Basics
  • Appearance
  • Preview your Web widget
  • Add your Web widget to your website
  • Set to a specific language
  • 💬 Give feedback

Was this helpful?

  1. set up channels
  2. All channels
  3. Web

Web V2

Chatlaye's new widget with a more modern feel and optimized mobile performance. Below you can find out all about it!

PreviousLive example web widgetNextFrom Web V1 to V2

Last updated 4 months ago

Was this helpful?

Create your Web widget

To create a web channel with the new widget:

  1. Navigate to the Channel page on your bot.

  2. Press the Add channel button in the top right.

  3. Look for 'Web'.

  4. Select Web.

  5. Click on Next.

Customize your Web widget

The first two tabs Basics and Appearance will allow you to change the settings and looks of your bot. That way you can ensure the branding of your new widget corresponds to the one your company uses.

Basics

On the 'Basics' page you can make a number of changes:

  • The Title and Subtitle of the widget will appear at the top of the widget. Make sure to leave them empty if you don't want any title to appear.

  • Enable text input is on by default and will allow your customer to type text towards your bot. Make sure to turn this off if you want your bot to be used solely as a click bot.

  • Enable audio input allows the user to send voice snippets to the bot using the record button at the bottom right corner of the widget.

  • Enable file upload will make the paperclip to the right of the input-box appear. This will allow your customer to send files to your chatbot.

  • Enable sound notifications activates audible alerts for your bot's message replies.

Appearance

On the Appearance page you can make a number of changes:

  • Change the position of your widget to Bottom right or Bottom left.

  • Customize your Brand color, Conversation color and Action color.

  • Launcher is the image to show in the launcher button.

  • Header logo is the image shown in the header.

  • Bot avatar is the default image for the bot avatar.

  • Agent avatar is to show as the default agent avatar.

Make sure that you click on Save after changing your bot's appearance.

Preview your Web widget

To preview your Web widget after styling it:

  1. Click Save.

  2. Press Preview.

Your bot will open on a CodePen page where you can test it.

Add your Web widget to your website

After having configured your widget you can start embedding it on your website.

To embed your website widget:

  1. Click on the Installation tab.

  2. You'll see an HTML script under Embed your widget. Copy and paste this script in the header section of every HTML page of your website where you want it to appear.

  3. Additionally, place the provided snippets at the end of the body section on each HTML page of your website.

Make sure that the 1st and 2nd snippets are pasted to your page.

Set to a specific language

To set the language in an iframe, add the desired language as a query parameter to the iframe URL. This allows you to force your widget to display in that specific language.

For example:

https://webchat.chatlayer.ai/embedded/botId:channelId?language=en


💬 Give feedback

Make sure your widget is created on the correct version of your bot, be it or .

Note that you can also change the bot language by using the

Please let us know what you think of the new Web widget .

🆕
DRAFT
LIVE
HTML
.
here
Create your Web widget from the Channels tab.
Set your Web widget Basic settings.
Change your Web widget's style under the Appearance tab.
Preview your bot in CodePen.
Install your Web widget to your web page using the Installations tab.