Skip to main content

​
Comprehensive Guide for Customizing Your Webchat

​
Introduction

Chatbot Builder Webchat allows you to easily integrate a chatbot on your website without needing third-party platforms. This guide will help you set up and customize your webchat, including changing the chat bubble icon and controlling its size, with easy-to-follow steps for non-coders and beginners.

​
Embedding the Webchat Code Into Your Website

​
Steps to Embed Webchat

  1. Navigate to Settings (inside your Fliqr AI account)
    • Go to Settings > Channels > Web Chatbot > Manage inside your Fliqr AI account.
  2. Add Authorized Websites (inside the Manage Webchat section)
    • Inside the manage webchat section, add your website domain or subdomain to the authorized websites list. The chatbot will only load on these authorized sites.
  3. Get the Webchat Code (inside the Manage Webchat section)
    • After creating and saving your webchat inside your Fliqr AI account, click the three dots in the manage webchat section to get the code.
  4. Insert the Code into Your Website
    • Warning: Always ensure that both IDs (your-webchat-id and your-account-id) provided in the webchat section are included in the script.
    Example code to insert: 
    <script src="https://app.fliqr.ai/webchat/plugin.js?v=5"></script>
<script>
    ktt10.setup({
        id: "your-webchat-id",  // webchat id
        accountid: "your-account-id",  // account id
        color: "#36d6b5"
    });
</script>
    This code will embed the webchat on your website, ensuring proper functionality with both required IDs.

​
Webchat Customization Table

Follow the instructions below to insert the necessary CSS or scripts into the designated areas of your webchat editor in Fliqr AI for customizing your chatbot interface.
#CSS ClassDescriptionExample Implementation
1.chat-headerStyles the chat header area.
2.m-0Removes all margins (margin: 0).
3.py-3Adds padding to the top and bottom (padding: 1rem).
4.chat-areaStyles the main chat area.
5.py-4Adds padding to the top and bottom (padding: 1.5rem).
6.px-4Adds padding to the left and right (padding: 1.5rem).
7.chat-area2Alternate styling for the chat area when the header is hidden.
8.my-messageStyles the user’s own chat messages.
9.animate__animatedApplies animation to the element (from animate.css library).
10.animate__slideinrightAnimates the element with a slide-in-from-right effect (from animate.css library).
…………

​
Switching Webchat Templates (Inside the Webchat Editor in Your Fliqr AI Account)

Warning: Insert the following code into the designated script area inside your webchat editor. 
<script src="https://app.fliqr.ai/webchat/plugin.js"></script>
<script>
    ktt10.setup({
        pageid: "your-account-id",
        color: "#007bff",
        hideheader: true,
        template: "template1"
    });
</script>

​
Displaying the Account Profile Picture as a Persona (Inside the Webchat Editor in Your Fliqr AI Account)

Warning: Insert the following code into the designated script area inside your webchat editor. 
<script src="https://app.fliqr.ai/webchat/plugin.js"></script>
<script>
    ktt10.setup({
        pageid: "your-account-id",
        showpersona: true
    });
</script>

​
Modifying the Chat Icon (Inside the Webchat Editor in Your Fliqr AI Account)

Insert the following code into the designated script area inside your webchat editor.
<script src="https://app.fliqr.ai/webchat/plugin.js"></script>
<script>
    ktt10.setup({
        pageid: "your-account-id",
        icon: "your_image_url"
    });
</script>

Replace "your_image_url" with the URL of your desired image.

### Open the Webchat After a Defined Time (Timeout)

Simply substitute `your_webchat_id` with your unique webchat ID, and `your_account_id` with your account ID. This ensures that your webchat will automatically open after 3 seconds, using the correct identifiers for seamless integration.

Example code:

```html
<script src="https://app.fliqr.ai/webchat/plugin.js"></script>
<script>
    ktt10.setup({
        id: "your_webchat_id",  // this is your webchat id
        accountid: "your_account_id",  // this is your account id
        color: "#36d6b5"
    });
    setTimeout(function() {
        ktt10btn.click();
    }, 3000);  // automatically open after 3 seconds
</script>

​
Free Templates

Access a collection of free templates here.