Home Website live chat

Website live chat

Pranav Raj
By Pranav Raj
• 13 articles

Website live chat settings explained

This document will help you fully set up your website live chat. It explains how to create and use the additional settings for a desired website inbox. Compatibility and requirements​ The web dashboard and the live chat widget work with most modern web browsers. Here are the supported browser versions: - Mozilla Firefox: v52 onwards - Google Chrome: v57 onwards - Chromium: v57 onwards - Apple Safari: v14.1 onwards - Microsoft Edge: v16 onwards Here are the supported mobile OS versions for the Chatwoot mobile app: - Android: v5.0 onwards - iOS: v11.0 onwards How to create a website channel on Chatwoot? Step 1. Go to the Inboxes page. Go to Settings → Inboxes → "Add Inbox" button. Step 2. Click on the "Website" icon. Step 3. Enter your website name, URL, and other details as described below. The available fields are explained below. 1. Website name Enter your website's name. For e.g., Example Inc. 2. Website domain Enter your website's URL. For e.g., www.example.com 3. Widget color Click the pallet and select a color for your website live chat widget. 4. Welcome heading Write a greeting message for your customers. For e.g., Hello there 👋 5. Welcome tagline For e.g.,We are here to help you with your questions. Ask us anything, or share your feedback. 6. Enable/disable channel greeting Enable to Send Greeting message when customer starts conversation 7. Channel greeting message Give a greeting to start the conversation. For e.g., Hi. How can we help you? Once all details are entered, click the “Create Inbox” Button. Step 4. "Add agents" to your website inbox. The conversations will be routed to agents only if they are associated with the inbox. Even if you are an Administrator, you need to add yourself as an agent to the Inbox to see the Inbox on your screen. Select the Agents from the drop-down and click on Add agents. If agents have not been added, follow the steps to add agents. Step 5. Hooray! You have successfully created a website inbox. Now, add the widget to your website. Copy and paste the code snippet shown on the page to your website and start supporting your customers. You can click on the Copy button to copy and then paste in the root file of your website. If you click the "More settings" Button, you will be taken to the Additional Settings for Inbox. If you click on the "Take me there" button, you will be taken to the newly created Inbox. Step 6. If you want to update the agents with access to the inbox, go to Settings → Inboxes. You will be able to see your website inbox listed there. Click on Settings. You will be able to see the code as well as the list of agents who have access to the inbox. Complete the website inbox setup You already have a functional website inbox. Let's take a look at the additional Inbox settings.​ On your Inboxes screen, click the gear icon to reach the Settings page. You will see the following screen: Settings tab Scroll down to see more settings, where you can set up the various notifications you would like to receive when your website inbox starts functioning. Here are a couple of examples for your understanding: Enable email collect box is enabled by default. This means an automatic message to collect the e-mail id will be displayed once the customer starts a conversation. The customer/end user will receive a prompt to enter an e-mail id. Enable CSAT. Once you enable this, your Customer Satisfaction survey will be launched every time a ticket is resolved. The CSAT results can be viewed later in the Reports section. Click the "Update" button to save the changes you have made. Collaborators tab​ Click on the "Collaborators" tab. Here, you can add Agents to the Inbox or delete Agents already added in the Inbox. You can also enable or disable the automatic assignment of new conversations to the agents added to this inbox. Click on Update to save the changes. Business Hours tab​ Click on the "Business Hours" tab. In this section, you can set the working hours of your team. Check the check box for Enable business availability for this inbox if you have well-defined business hours. Once the box is checked, the a new section will open up, like shown below. You can write your message to be displayed to the customer during OFF business hours. You can also select the available business hours for each day of the week, along with the proper time zone. Click on the Update Business Hour Setting Button. Pre Chat Form tab​ Click on the "Pre Chat Form" tab. With this, you can collect information about your customers as soon as they enter your live chat window/website widget. You can use this to collect name, e-mail address, and more before beginning the chat. The fields as seen are explained below: 1. Enable pre chat form Select Yes or No. Yes, if you want to use the prechat form. No if you're going to keep it disabled. 2. Pre Chat Message Write a message to start a conversation with the customer. For e.g., Hi, We need some information to serve you better. 3. Pre chat form fields Check the needed ones. Imp: "Name," "Email" and "Phone" are the only standard attributes for the pre chat form. The other fields are created through custom attributes. If you need custom fields in your form, create them as custom attributes first. Click the "Update" button. Pre Chat Form is enabled now. Configuration tab​ Click on the “Configuration” tab. You can find the code snippet to be copied to the website here. You can click on the Copy button to copy the code and paste it into the root file of your website. Widget Builder tab​ You can customize your web widget with simple settings given on this page. You will be able to see your changes live.

Last updated on Apr 26, 2024

How to install live chat on a WordPress website?

WordPress is a popular Content Management System. If you are hosting your website on WordPress, you can add a Chatwoot live chat widget and talk to your visitors in real time. This can be done in 4 simple steps using Chatwoot’s WordPress plugin. Step 1. Download the Chatwoot plugin Download the Zip file of the latest Chatwoot WordPress plugin from GitHub, as shown below. Step 2. Upload the plugin to your WordPress website Log in to your WordPress account. Navigate to the Admin Panel and click “Plugins” from the sidebar. You will be able to see the "Add New" button. You will see an option to upload the plugin, as shown in the screenshot below. Click “Upload” and select the Zip file downloaded in step 1. Step 3. Activate the plugin Once the plugin is uploaded, you will see a Success screen with the "Activate Plugin" option, as shown below. Click the "Activate Plugin” button. Congrats! The plugin is now installed. To complete the configuration, you must share the Chatwoot app credentials, as shown in the steps below. Step 4. Configure the plugin Now, you will be able to see “Chatwoot Settings” under your "Settings" menu. Click on that to update the live-chat configuration. You will be presented with the Settings screen as shown below. Configure your Chatwoot plugin here to make it work. You need to create a Website inbox on your Chatwoot installation. Please refer to this guide to create a website channel inbox. The form fields are explained below. 1. Chatwoot Website Token / Chatwoot Installation URL Once you create a website channel inbox in your Chatwoot installation, you will get a script. You can copy the Token and the URL as shown below. 2. Widget Design Chatwoot supports two live chat widget designs–Standard Design and an Expanded Bubble design. Choose your preference. 3. Widget Position You can select where to place the live-chat widget on the website based on your preference. The available options are Left & Right. 4. Language Chatwoot support 30+ languages. The default language is English. 5. Launcher text This is an optional field. If you use the expanded bubble design, you can use the launcher text to customize the text displayed on the bubble. Once you complete the form, click the "Save changes" button. Also, ensure that you have set up the website inbox from Chatwoot. Step 5. Verify that the plugin is working correctly Visit your website and see if the widget appears on the website!

Last updated on Apr 10, 2024

How to install live-chat on a React Native app?

If you have a React Native app, you can add Chatwoot live chat widget and talk to your visitors in real-time. This can be done in 3 simple steps using the Chatwoot plugin. Step 1. Create a website inbox in Chatwoot​ Please refer to this guide for detailed instructions on setting a website inbox in Chatwoot. Step 2. Add the plugin to your project​ Add one of the following plugins to your project. yarn add @chatwoot/react-native-widget or npm install --save @chatwoot/react-native-widget --save This library depends on react-native-webview and async-storage. Please follow the instructions provided in the docs. iOS Installation​ If you're using React Native versions > 60.0, it's relatively straightforward. cd ios && pod install Step 3. Use it like this​ Replace websiteToken and baseUrl with appropriate values. import React, { useState } from 'react'; import { StyleSheet, View, SafeAreaView, TouchableOpacity, Text } from 'react-native'; import ChatWootWidget from '@chatwoot/react-native-widget'; const App = () => { const [showWidget, toggleWidget] = useState(false); const user = { identifier: 'john@gmail.com', name: 'John Samuel', avatar_url: '', email: 'john@gmail.com', identifier_hash: '', }; const customAttributes = { accountId: 1, pricingPlan: 'paid', status: 'active' }; const websiteToken = 'WEBSITE_TOKEN'; const baseUrl = 'CHATWOOT_INSTALLATION_URL'; const locale = 'en'; return ( <SafeAreaView style={styles.container}> <View> <TouchableOpacity style={styles.button} onPress={() => toggleWidget(true)}> <Text style={styles.buttonText}>Open widget</Text> </TouchableOpacity> </View> { showWidget&& <ChatWootWidget websiteToken={websiteToken} locale={locale} baseUrl={baseUrl} closeModal={() => toggleWidget(false)} isModalVisible={showWidget} user={user} customAttributes={customAttributes} /> } </SafeAreaView> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, button: { height: 48, marginTop: 32, paddingTop: 8, paddingBottom: 8, backgroundColor: '#1F93FF', borderRadius: 8, borderWidth: 1, borderColor: '#fff', justifyContent: 'center', }, buttonText: { color: '#fff', textAlign: 'center', paddingLeft: 10, fontWeight: '600', fontSize: 16, paddingRight: 10, }, }); export default App; And...you're done. Check out the complete example here.

Last updated on Apr 10, 2024

How to install live-chat on a Next.js app?

If you have a Next.js app, you can add Chatwoot live chat widget and talk to your visitors in real time. To integrate Chatwoot with your Next.js application, you need a component that loads the Chatwoot script. You can do this in two quick steps. Let us illustrate this with the help of an example below. This example shows a React component that loads the Chatwoot script asynchronously. Step 1. Copy and Create! Copy the following code and create a file in your components folder with the name ChatwootWidget.js. import React from 'react'; class ChatwootWidget extends React.Component { componentDidMount () { // Add Chatwoot Settings window.chatwootSettings = { hideMessageBubble: false, position: 'right', // This can be left or right locale: 'en', // Language to be set type: 'standard', // [standard, expanded_bubble] }; // Paste the script from inbox settings except the <script> tag (function(d,t) { var BASE_URL="<your-installation-url>"; var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; g.src=BASE_URL+"/packs/js/sdk.js"; s.parentNode.insertBefore(g,s); g.async=!0; g.onload=function(){ window.chatwootSDK.run({ websiteToken: '<your-website-token>', baseUrl: BASE_URL }) } })(document,"script"); } render () { return null; } } export default ChatwootWidget Step 2. Import​ Import the component in your pages or layout component, as shown below. import React, { Fragment } from 'react' // ... import ChatwootWidget from '../components/ChatwootWidget' const Page = () => ( <Fragment> <ChatwootWidget /> <Component {...}> </Fragment> ) export default Page You would be able to see the Chatwoot widget on the page now.

Last updated on Apr 10, 2024

How to install live-chat on a Vue.js app?

To integrate Chatwoot with your Vue.js application, you need to paste the Chatwoot widget script in your Vue.js application's index.html file. Here is how to do this: Step 1. Get your widget script​ Your widget script can be found in your Website Inbox settings. Go to Settings -> Inboxes -> Select your Website channel > Configuration tab. If you haven't created a website inbox yet, you can find the step-by-step instructions here. Step 2. Copy the script​ Copy the script that was created in the code field of the channel. Step 3. Paste the script here​ Open your Vue project and paste the script into the index.html file, right before the closing </body> tag. <body> <noscript> <strong >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong > </noscript> <div id="app"></div> <!-- built files will be auto injected --> <!-- Chatwoot script goes here --> <script> (function (d, t) { var BASE_URL = "https://example.com"; var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.src = BASE_URL + "/packs/js/sdk.js"; g.defer = true; g.async = true; s.parentNode.insertBefore(g, s); g.onload = function () { window.chatwootSDK.run({ websiteToken: "yZ7USzaEs7hrwUAHLGwjbxJ1", baseUrl: BASE_URL, }); }; })(document, "script"); </script> <!-- Chatwoot script goes here --> </body> Step 4. Check​ You will be able to see the Chatwoot widget on the page now. Something like this: Vue.js, Nuxt.js module​ A community-maintained module (Made by the awesome folks at @huntersofbook) for integrating Chatwoot in your Vue 3 and Nuxt 3 projects is available. You can find a demo here. - View Vue 3 module. - View Nuxt 3 module.

Last updated on Apr 10, 2024

How to send additional user information to Chatwoot using SDK?

The Chatwoot website SDK enables you to send additional user information to Chatwoot. If you have installed our code on your website, the SDK would expose window.$chatwoot object. To make sure that the SDK has been loaded completely, please make sure that you listen to chatwoot:ready event as follows: window.addEventListener("chatwoot:ready", function () { // Use window.$chatwoot here // ... }); If you would like to listen to the messages in the widget you can use the following event. window.addEventListener('chatwoot:on-message', function(e) { console.log('chatwoot:on-message', e.detail) }) SDK settings​ To hide the bubble, you can use the setting mentioned below. Note: If you use this, you must also trigger the widget. window.chatwootSettings = { hideMessageBubble: false, position: "left", // This can be left or right locale: "en", // Language to be set useBrowserLanguage: false, // Set widget language from user's browser type: "standard", // [standard, expanded_bubble] darkMode: "auto", // [light, auto] }; Use browser language in your live chat widget automatically To show the live chat widget in the user's browser locale, set the useBrowserLanguage to true in the window.chatwootSettings mentioned above. Note: If useBrowserLanguage is set to true, The locale mentioned will be ignored. If the browser language is not supported by chatwoot, the locale mentioned under locale will be used. If that's also missing, the widget will fall back to the locale of the agent dashboard. Dark Mode​ Chatwoot live-chat widget supports dark mode v2.4.0 onwards. To enable the dark mode, follow the steps mentioned here. Widget designs​ Chatwoot supports two designs for the widget. 1. Standard (default) 2. Expanded bubble If you are using expanded bubble, you can customize the text used in the bubble by setting launcherTitle parameter on chatwootSettings as described below. window.chatwootSettings = { type: "expanded_bubble", launcherTitle: "Chat with us", }; Enable popout window​ In order to enable the popout window, add the following configuration to chatwootSettings. This option is disabled by default. window.chatwootSettings = { // ...Other Config showPopoutButton: true, } You can also popout the chat window programatically with the `popoutChatWindow()` method. Programatically open the popout window​ You can open thje popout window programatically with the popoutChatWindow() method. To initiate this, call the method like below. window.$chatwoot.popoutChatWindow(); Toggle the widget bubble visibility​ If you want to hide/show the Chatwoot widget bubble, you can do so with toggleBubbleVisibility('show/hide') Example window.$chatwoot.toggleBubbleVisibility("show"); // to display the bubble window.$chatwoot.toggleBubbleVisibility("hide"); // to hide the bubble Trigger widget without displaying bubble​ window.$chatwoot.toggle(); // Toggle widget by passing state window.$chatwoot.toggle("open"); // To open widget window.$chatwoot.toggle("close"); // To close widget Set the user in the widget​ window.$chatwoot.setUser("<unique-identifier-key-of-the-user>", { email: "<email-address-of-the-user@your-domain.com>", name: "<name-of-the-user>", avatar_url: "<avatar-url-of-the-user>", phone_number: "<phone-number-of-the-user>", }); setUser accepts an identifier which can be a user_id in your database or any unique parameter which represents a user. You can pass email, name, avatar_url, phone_number as params. Support for additional parameters is in progress. Ensure you reset the session when the user logs out of your app. Identity validation using HMAC​ To disallow impersonation and to keep the conversation with your customers private, we recommend setting up the identity validation in Chatwoot. Identity validation is enabled by generating an HMAC(hash based message authentication code) based on the identifier attribute, using SHA256. Along with the identifier you can pass identifier_hash also as shown below to make sure that the user is correct one. window.$chatwoot.setUser(`<unique-identifier-key-of-the-user>`, { name: "", // Name of the user avatar_url: "", // Avatar URL email: "", // Email of the user identifier_hash: "", // Identifier Hash generated based on the webwidget hmac_token phone_number: "", // Phone Number of the user description: "", // description about the user country_code: "", // Two letter country code city: "", // City of the user company_name: "", // company name social_profiles: { twitter: "", // Twitter user name linkedin: "", // LinkedIn user name facebook: "", // Facebook user name github: "", // Github user name }, }); To generate HMAC, read identity validation. Note that implementing HMAC authentication will allow chat history to persist across sessions. Set custom attributes​ To set additional information about the customer, you can use customer custom attributes field. Read more about custom attributes here. To set a custom attribute, call setCustomAttributes as follows window.$chatwoot.setCustomAttributes({ accountId: 1, pricingPlan: "paid", // Here the key which is already defined in custom attribute // Value should be based on type (Currently support Number, Date, String and Number) }); You can view these information in the sidepanel of a conversation. To delete a custom attribute, use deleteCustomAttribute as follows window.$chatwoot.deleteCustomAttribute("attribute-key"); Set language manually​ window.$chatwoot.setLocale("en"); To set the language manually, use the setLocale function. Set labels on the conversation​ Please note that the labels will be set on a conversation if the user has not started a conversation. In that case, the following items will not have any effect: window.$chatwoot.setLabel("support-ticket"); window.$chatwoot.removeLabel("support-ticket"); Refresh the session (use this while you logout the user from your app)​ window.$chatwoot.reset(); Widget errors​ To see any errors in the widget, please make sure that you listen to chatwoot:event event as follows: window.addEventListener("chatwoot:error", function () { // ... }); Note: This feature is available in v2.3.0 and later.

Last updated on Apr 10, 2024

How to continue conversations through email?

Your customers can continue their chat conversations with your agents through email threads. This may be required under the following circumstances. - No agents are available, and the customer leaves a message in the chat. - The customer leaves the chat before the agent replies. For this to work, the contact should have an email address in the Chatwoot CRM. Obtaining email addresses of contacts​ You can prompt/update customer emails into Chatwoot through the following ways. 1. From Chatwoot SDK​ If customer email is known, you can supply it into chatwoot via the setUser method in our SDK. 2. From pre-chat form​ If you enable a mandatory pre-chat form, the conversation starts with a screen as shown below: 3. From Email collect Prompt​ When the pre-chat form is disabled, and the customer's email is unknown, Chatwoot starts a conversation with an email collect prompt. Conversation Continuity​ Note: Enable conversation continuity in self-hosted installations with the help of this guide. If the customer's email address is updated through any of the options mentioned above and they leave the chat while the agent has replied, the following happens. - The customer receives an email thread with a conversation summary. They can reply to that email and continue the conversation. - The agent receives the customer replies from email in their Chatwoot dashboard, continued over the existing conversation thread. The email icon in the chat bubble indicates that the customer has replied through email.

Last updated on Apr 10, 2024

How to enable identity validation in Chatwoot?

Identity validation helps ensure that the conversations between your customers and support agents are private. It also helps with disallowing impersonation. Identity validation can be enabled by generating an HMAC. The key used to generate HMAC for each web widget differs and can be copied from Inboxes -> Settings -> Configuration -> Identity Validation -> Copy the token shown there. You can generate HMAC in different languages, as shown below. Generate HMAC​ PHP​ <?php $key = '<webwidget-hmac-token>'; $message = '<identifier>'; $identifier_hash = hash_hmac('sha256', $message, $key); ?> Javascript (Node.js)​ const crypto = require('crypto'); const key = '<webwidget-hmac-token>'; const message = '<identifier>'; const hash = crypto.createHmac('sha256', key).update(message).digest('hex'); Ruby​ require 'openssl' require 'base64' key = '<webwidget-hmac-token>' message = '<identifier>' OpenSSL::HMAC.hexdigest('sha256', key, message) Elixir​ key = '<webwidget-hmac-token>' message = '<identifier>' signature = :crypto.hmac(:sha256, key, message) Base.encode16(signature, case: :lower) Golang​ package main import ( "crypto/hmac" "crypto/sha256" "encoding/base64" "encoding/hex" ) func main() { secret := []byte("<webwidget-hmac-token>") message := []byte("<identifier>") hash := hmac.New(sha256.New, secret) hash.Write(message) hex.EncodeToString(hash.Sum(nil)) } Python​ import hashlib import hmac import base64 secret = bytes('<webwidget-hmac-token>', 'utf-8') message = bytes('<identifier>', 'utf-8') hash = hmac.new(secret, message, hashlib.sha256) hash.hexdigest()

Last updated on Apr 10, 2024