Live Chat
A website is an important part of a business’s presence. Therefore, it is essential to make it easy for customers to interact with your business through Qiscus Live Chat. This feature enables you to create more touchpoints by adding various channels as live chat options.
In addition to providing snippets for embedding on a website, you can also integrate the widget into your Android or iOS app. For detailed guidance on embedding this widget in Android, refer to the Android Customization section; for iOS, you can refer to iOS Customization.
Important notes:
- To use Qiscus Live Chat, you need to have a website.
- You can add up to six channels. If you need more, please contact our team.
- Channels added to Live Chat are not directly linked to the existing channels in Live Chat.
Add a Qiscus Live Chat
Follow these steps to add Qiscus Live Chat:
- Click Integration, then click the Live Chat tab
- Click the Qiscus Live Chat card. You will be directed to the Qiscus Live Chat page.
- On the Qiscus Live Chat page, click the New Integration button
- Click the + icon in the channel badge, then upload your channel’s badge icon. After that, enter your channel name.
- Your channel badge icon and channel name are now ready, as shown in the example below.
- Scroll down slightly, select the “Agree with the Terms and Conditions” checkbox, and then click the Next button.
- Click the Setup Later link. If you want to set up a Channel Auto Responder, click Add Channel Auto Responder. You can see the details in this section.
- Click Save at the bottom of the page, then click the Okay button on the confirmation page.
- Your Qiscus Live Chat is ready to use and has been moved to the Qiscus Live Chat list.
Build and Customize Your Qiscus Live Chat
To build and customize your Qiscus Live Chat, you need the Live Chat Builder to create the chat that will appear on your website. You can customize or personalize your live chat experience to fit your needs using the Live Chat Builder:
- Welcome Dialogue
The Welcome Dialogue allows you to create a welcome message that appears in your live chat. It helps you greet visitors when they open the chat, making the experience friendlier and more engaging.
- Call to Action
The Call to Action allows you to create and customize the Call to Action (CTA) button in your Qiscus Live Chat. This button is the main element visitors see on your website to start a live chat. It usually appears in the bottom-right corner and invites users to interact, for example, with text such as “Talk to Us” or “Chat Now.”
- Channels
The Channels allows you create and customize greetings for users and lets them choose a communication channel (such as Qiscus Live Chat) before starting a conversation.
- Login Form
The Login Form allows users to start a conversation by logging in first. It enables you to identify users before chatting, which helps provide a more personalized and secure experience.
- Chat
The Chat function allows you to start a conversation with the customer care agent. The grayed-out shapes likely represent placeholder text for messages that have already been sent and received.
- Color Scheme
The Color Scheme allows you to change the visual appearance of the Qiscus Live Chat to match your brand’s color palette. It focuses on a single “Base Color” that is applied to key elements of the chat interface.
All changes are made through the interface. Once you are satisfied with the setup, you can preview the chat and publish it to your site.
When you adjust settings on the left panel, the right panel preview updates instantly. This is a static preview showing only the section you’re editing. After you have completed your settings, click the Save and Preview button. Your Qiscus Live Chat setting will be saved and you can see the preview in the right side of page.
Welcome Dialogue
To set the welcome dialogue, follow the steps below:
- Click the Live Chat Builder tab, then click Welcome Dialogue.
- To complete the live chat setup, fill in the following fields:
- Upload the brand icon (for example, the Qiscus icon). It will appear in the top-left corner of the live chat
- Enter the Greeting Title (for example, “Hello There”)
- Enter the Welcome Message (for example, “Welcome to Qiscus”)
- Upload the icon that will appear in the live chat preview.
- Enter the Description. This text will appear on the CTA button (for example: "Ask a Question").
- Set the Delay Appear. This setting determines how many seconds it takes before the Qiscus Live Chat appears on the website (for example: 3 seconds).
- Enable Auto Expand by checking the box if you want the welcome dialog to automatically expand on Qiscus Live Chat without requiring users to click it.
- Attention Grabber
The Attention Grabber is a visual popup message that appears automatically on your website to capture visitors’ attention. It typically includes an image or a short message, such as a promo, update, or greeting and helps increase user engagement by encouraging visitors to open the chat.
If the Attention Grabber is active, the Welcome Dialogue will not be displayed.
Below are the fields that need to be filled in when activating the Attention Grabber:
- Image: You can upload the image for grab attention. If you activate the toggle, the image will appear in the Qiscus Live Chat.
- Text: You can fill it with words to promote a sale or say hello to your new visitors.
- Appear Delay: You can set how many seconds after the page loads the attention grabber should appear. This setting enables precise control over the timing, preventing the popup from appearing too early or too late.
- After you have completed your settings, click the Save and Preview button. Your Qiscus Live Chat setting will be saved and you can see the preview in the right side of page
Call to Action
- To customize the CTA, click the Live Chat Builder tab, then click Call to Action.
- Complete the following fields:
a. With Text
Enable this option to display text on the chat button. When enabled, you can customize the text that appears. For example, typing "Talk to Us" will update the button in the live preview.
b. Icon to Call to Action
Enable this option to add an icon next to the button text. You can then upload a custom image to be used as the icon.
c. Border Radius
This setting adjusts the roundness of the button’s corners.
- A larger value (for example, 32) makes the corners more rounded.
- A smaller value (for example, 0) makes the corners sharp and square.
Channels
- To customize the Channels, click Live Builder Chat tab, then click Channels
- Activate the toggle button
- Complete the following fields:
- Welcome Channel Title
Enter the main title of your welcome message (for example: “Ask a Question!”).
- Welcome Channel Subtitle
Enter a short sentence that appears below the title (for example: “In Everything!”).
- Channel Introduction
Enter introduction text that appears before the list of available chat channels. This helps users understand how they can chat with you (for example: “Have a more personalized chat with us on…”).
- Enable Qiscus Live Chat
This field includes a toggle button. If the toggle is turned on, the Qiscus Live Chat will be displayed on the screen.
- Live Chat Badge
You can upload a Live Chat Badge to make the chat interface more appealing to users.
How to Add More Channels
You can add another channel by clicking the +Add More Channel button in the bottom of a page. Such as WhatsApp, Line, Telegram, Instagram, Line and Line Business. You can add up to six channels. If you need more, please contact our team.
Here is the steps on how you add more channels:
- Click the +Add More Channel button
- A pop up to add Channel Widget will appear. Fill in the channel name and the channel link. In this example, we will add WhatsApp channel.
| Channel | URL | Note |
|---|---|---|
| https://wa.me/your_phone_number_with_country_code?text=Hello+qiscus.com+team%2C+saya+ingin+berdiskusi+lebih+lanjut+mengenai+produk.%20From%20URL:%20https%3A%2F%2Fqiscus.com%2F | You can change the phone number and text as you desire | |
| http://m.me/page | Change page with your page name | |
| https://ig.me/m/username | Change username with your own Instagram's username | |
| LINE Non Business | https://line.me/ti/p/(LINE ID} | Change LINE ID with your own LINE ID |
| Telegram | https://t.me/{bot_name} | Change bot_name with your Telegram bot name |
| Line Business | https://line.me/R/ti/p/@page_id?from=page | You can change the page_id to your LINE bussines ID |
| Line Business | https://page.line.me/page_id | You can change the page_id to your LINE busines ID |
- Upload Channel Name, Channel Link, and Channel Badge. Then click Add Channel button
- Activate the toggle button on the new channel to add it on the Qiscus Live Chat
Login Form
- To customize the Login Form, click Live Chat Builder Live tab, then click Login Form
- Complete the following fields:
- Subtitle
Enter a custom message to display to users before they begin a chat (for example: “Please fill in the details below before chatting with us!”).
- Button form
Enter the text that appears on the button a user clicks to start the chat (for example: “Start Chat”)
- Choose Customer Identifier
Choose how you want to identify users. You can select one of the following options:
- Email: The user will be prompted to enter their email address.
- Phone Number: The user will be prompted to enter their phone number.
- Additional field:
This feature allows you to add custom fields to the login form. Clicking the + Add More Field button lets you collect additional information from users, such as their name, company, or a specific question before the chat begins.
Chat
- To customize the Login Form, click Live Chat Builder Live tab, then click Chat
- Upload the Customer Service avatar and enter the Customer Service name as shown in the picture below:
Color Scheme
For changing the color scheme, you just need to click the color box and swipe it until you find the valid color for your brand.
Add Code Installation to Your Website
The primary function of the Code Installation tab is to provide users with the necessary code snippet to embed Qiscus Live Chat into a website. To add your customized Qiscus Live Chat to your website, follow these steps:
- Click Code Installation tab
- Hover over the code, then click the Copy Code button
- Paste the code into the
<body>tag of your website to install Qiscus Live Chat. Below is an example showing Qiscus Live Chat appearing after the code is pasted into the<body>tag of a website.
Settings
This feature has two settings: Channel Auto Responder and Enhance Conversation Security. For more details, see the next section.
Channel Auto Responder
The Channel Auto Responder feature allows Qiscus Live Chat to automatically reply to messages received in the channel based on your operating hours. Admins can set autoresponder messages for both during and outside office hours. To configure office hours, go to Settings > General > Office Hour.
For setting the channel auto responder, follow these steps:
- Click Settings tab, enable the toggle button, then click Set Channel Auto Responder button
- Fill the message in Channel Auto Responder During Office Hour field. This message will be automatically sent to customers during working hours when they initiate a chat.
Info: Select the Keep sending every time a customer initiates a chat session, even if the room has been resolved checkbox if you want the message to be sent again each time the customer starts a new session, even in the same room.
- Fill the message in Channel Auto Responder Outside Office Hour field. This message will be automatically sent to customers outside working hours. Use this field to inform customers that you are currently offline and will respond once you are back online.
Select the Send every time a customer sends a message checkbox if you want the message to be sent for every incoming customer message received outside office hours.
- After all fields are filled, click the Save Changes button at the bottom of the page.
Enhance Conversation Security
This feature creates a new, unique chat room for a customer each time they start a chat from a different device or web browser.
When this toggle is enabled, the system ensures that if a customer initiates a chat on their phone and later uses their laptop, they will not see any previous conversation. This helps enhance security by preventing unauthorized access to past chat history, especially in situations where a device or browser is shared. Essentially, each chat session is isolated to the specific device and browser from which it originated.
How to Upgrade to the New Version
Enjoy full control with the new Live Chat. Customize it easily on your website and give visitors the perfect experience. Upgrading is a one-way step, but it’s a step forward.
Here is the comparison between old version and new version of Qiscus Live Chat:
- Builder
- Integration Page
- Channel
If you don’t update, you won’t be able to customize your Live Chat. Once you upgrade, you won’t be able to switch back to the old version.
If you want to update your live chat to the new version, follow these steps:
- Choose your Live Chat that you want to upgrade.
- Mark the “Yes, I’m ready to switch to the new Live Chat version” checkbox.
- Then click Update button.
- You are now experiencing new version of a Qiscus Live Chat.