3. Customizing a Webchat Project Setting

​

Overview

Webchat is a conversational interface that allows users to interact with your chatbot. You can customize the webchat project settings in ChatDash to match your brand’s look and feel.

​

Customizing a Webchat Project Setting

1. Login as an agency user in ChatDash.
2. Go to the Clients tab in the ChatDash dashboard.
3. Find the client’s project you want to customize.
4. Click on the Settings icon.
5. You will be redirected to the Webchat Project Settings page.
6. Customize the following settings:
   • Project Name: Change the project name.
   • Project Description: Add a description to the project.
   • Branding: Customize the webchat branding at the bottom of the webchat. (Default: Powered by ChatDash)
   • Logo: Upload a logo for the webchat.
   • Monthly Incoming Text Message Limits: Set the monthly incoming text message limits for the project.
   • Theme: Customize the webchat color theme.
   • Fonts: Change the webchat font style.
   • Background Image: Change the webchat background image.
   • Record Conversation: Enable or disable the conversation recording feature.
   • Popup Message: Customize the popup message that appears when the webchat is minimized.
   • Autolaunch: Enable or disable the autolaunch feature. (Webchat will automatically launch when the page loads)
7. Click on the Save button to save the changes.

​

Advanced Customization with Custom CSS

For more granular control over the webchat’s appearance, you can now use custom CSS to style specific elements:

1. Open your browser’s developer console.
2. Locate the element you want to customize. Look for classes that start with cd-widget-*.
3. Add your custom CSS rules in ChatDash project setting page. Remember to include the !important tag to ensure your styles take precedence.

Example custom CSS:

/* Customize message text color */
.cd-widget-text {
    color: #1e9f74 !important;
}

/* Customize button text color */
.cd-widget-choice-button {
    color: black !important;
}

​

Embedding the Webchat

To embed the webchat in your website, use the following script:

<script>
(function() {
    if (window.chatWidgetScriptLoaded) return;
    window.ChatWidgetConfig = {
        projectId: "", // Add your ChatDash project ID here
    };
    var chatWidgetScript = document.createElement("script");
    chatWidgetScript.type = 'text/javascript';
    chatWidgetScript.src = "https://storage.googleapis.com/chatwidgetcdn/dist/assets/js/index.js";
    document.body.appendChild(chatWidgetScript);
    window.chatWidgetScriptLoaded = true;
})();

// This function is optional and can be used to open the chat widget programmatically
function openChat() {
    if (window.openChatWidget) {
        window.openChatWidget();
    } else {
        console.error("Chat widget is not fully loaded yet.");
    }
};
</script>

You can also add a custom button to open the chat (optional):

<button onclick="openChat()">Open Chat</button>

This allows you to integrate the webchat seamlessly into your website and provide users with an easy way to access it.