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
  • Change width / height of chat window
  • Web widget overlay
  • Border chat balloon
  • Center send button
  • Open widget automatically
  • Change colours
  • Custom CSS

Was this helpful?

  1. set up channels
  2. All channels
  3. Web
  4. Web V1 [Deprecated]

Customize web widget

PreviousWeb V1 [Deprecated]NextLive example web widget

Last updated 8 months ago

Was this helpful?

From 31st October 2024, all Chatlayer customers using the Web channel will need to switch to the . This means that Web V1 will be removed from our codebase. Learn everything about .

Attention:

This article refers to our legacy web widget, which will be deprecated in the future.

All newly created web widgets should follow the .

There are several options to customize the web widget on your website. Some changes need to be done within the chat widget, and some of them in de code of your website. Check out the examples below for some inspiration how to customize the web widget to your brand.

Change width / height of chat window

You can change the width / height of your widget in the wrapper on your website:

body .chatlayer-chatbox-wrapper{
 width: 350px;
 max-width: 100%;
 max-height: 560px;
}

Web widget overlay

If you are experiencing that your website is on top of the web widget, and the web widget is not correctly visible, you can change this with the z-index:

  • If you remove the 'z-index' css property for that HTML element which is overlapping the widget, the widget should not be hidden behind that element anymore.

  • Alternatively, you could pass an HTML element as an option to our SDK, that HTML element will then be used as a container to show the chat widget in. An example for using a wrapper element, assuming your webpage contains an HTML element with id 'chatlayer-sdk-wrapper':

<script src=β€œYOUR_CHATBOX_URL" onload=β€˜chatlayer({ wrapper: document.querySelector('#chatlayer-sdk-wrapper') })’ async></script>

This will allow you to apply css to the '#chatlayer-sdk-wrapper' directly for positioning it on your page, instead of using our default wrapper.

Border chat balloon

You can style the balloon with an extra border in the colour of your choice by using the following in the custom CSS (only available for Enterprise and Corporate customers) in your chat widget:

.chatBalloon-user{
 border: 1px solid red;
}

Center send button

In your custom CSS you can upload the following code to center the send button:

.ChatInputContainer{
 display: flex;
 align-items: center;
}

Open widget automatically

The web widget is opened when clicked on, but can also open automatically. This can be changed in the HTML of your webpage. In the example below, the chatbot opens every 10 seconds:

<script>
 const initChatlayer = () => {
 const chatlayerInstance = chatlayer();
 chatlayerInstance.open();

 setInterval(()=>{
      chatlayerInstance.open();
 }, 10000)
  }

</script>
<script src="<YOUR_SDK_URL>" referrerpolicy="no-referrer-when-downgrade" onload='initChatlayer()' async></script>

Change colours

For changing the color of the text that the user writes and for the color of the placeholder, you could add a custom CSS like below:

.ChatInputText-textarea:focus{ 
color: #404040; 
} 
.ChatInputText-textarea{ 
border-color: #DCDCDC; 
} 
.ChatInputText-textarea::placeholder{ 
color: #767676; 
}

For changing the colour of the chat bubble you could already make those changes from the colors tab in the configuration screen. If you want to add your custom CSS, then something like this would work:

.chatBalloon-bot{ 
background-color: #E8F5FA; 
color: #404040; 
font-size: 14px; 
font-family: "Open Sans"; 
} 
.chatBalloon-user{ 
background-color: #E8F5FA; 
color: #404040; 
font-size: 14px; 
font-family: "Open Sans"; 
}

For changing the size of the buttons, you could add the CSS like this:

.SendIconImage { 
height: 2em; 
padding: 1em; 
}

Custom CSS

To make your Chat Widget look customized as per your needs, our Enterprise and Corporate clients can upload their own CSS. Please see the following list of CSS classes that you can use to customize your Web Widget:

  • ChatTitle

  • ChatTitleBar

  • ChatTitleImage

  • wrapper

  • BotImage

  • userImage

  • container

  • chatBalloon-default

  • chatBalloon-user

  • chatBalloon-bot

  • chatBalloon-agent

  • ChatInputContainer

  • ChatInputText-container

  • ChatInputText-textarea

  • chatQuickReplies-container

  • buttons-image

  • buttons-textimage

  • buttons-default

  • chatTemplate-buttonTemplate-container

  • chatTemplate-buttonTemplate-buttons-default

  • chatTemplate-buttonTemplate-buttons-unknown

  • chatTemplate-buttonTemplate-buttons-header

  • chatTemplate-listTemplate-button

  • chatTemplate-listTemplate-container

  • chatTemplate-element-container

  • chatTemplate-element-column

  • chatTemplate-element-image

  • chatTemplate-element-title

  • chatTemplate-element-subtitle

  • chatTemplate-element-button

  • chatTemplate-chatImage-container

  • chatTemplate-chatVideo-container

  • chatTemplate-chatAudio-container

  • chatTemplate-chatClarousel-element-container

  • chatTemplate-chatCarousel-element-image

  • chatTemplate-chatCarousel-element-title

  • chatTemplate-chatCarousel-element-subtitle

  • chatTemplate-chatCarousel-element-button

  • chatTemplate-chatCarousel-element-prevButton

  • chatTemplate-chatCarousel-element-prevButtonIcon

  • chatTemplate-chatCarousel-element-nextButton

  • chatTemplate-chatCarousel-element-nextButtonIcon

Change YOUR SDK URL with the SDK URL, as described .

🚨
new web widget, Web V2
moving from V1 to V2
Web V2 documentation
here