How to customize your widget

1. Go to the Agents tab in the your agency dashboard.

2. Find the agent you want to customize.

3. Click on the agent and navigate to Agent Settings.

4. Customize the following settings:

   1. Overview

      • Agent Image: Default will be ChatDash’s logo

      • Agent Name: Change the agent name.

   2. Widget

      1. General

         • Widget Layout: Choose between Original, Intercom, and Simple Voice (voice widget only).

         • Description: Add a description to show on the widget.

         • Branding: Customize the branding at the bottom of the widget. (Default: Powered by ChatDash)

         • Monthly Incoming Text Message Limits: This is for Text Based Agents Only. Set the monthly message limit for this agent.

      2. Theme

         • Customize the font, color, and much more depending on the widget’s layout.

      3. Advanced

         • Record Conversation: Enable or disable the conversation to be visible in your client’s dashboard conversations tab.

         • Popup Message: Customize the popup message that appears when the widget is minimized on your website.

         • Autolaunch: Enable or disable the autolaunch feature. (Widget will automatically launch (open) when the page loads).

         • Launch Message: Customize the first message your assistant sends to the user in your widget (this is not available for Voiceflow agents).

         • Conversation Starter: Add predefined user responses the user can click and send as their response.

         • Terms of Service and Privacy Policy: Add links to your TOS or Privacy Policy in your widget.

5. Click on the Save Changes button to save the changes.

Advanced customization with custom css

For more granular control over the widget’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 agent setting page. Remember to include the !important tag to ensure your styles take precedence.

Example
HTML
Copy
/* Customize message text color */
.cd-widget-text {    
   color: #1e9f74 !important;
}
/* Customize button text color */
.cd-widget-choice-button {    
   color: black !important;
}

Embedding the widget

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

Example
HTML
React
Copy
<div id="cd-widget"></div>
<script>
  (function() {
      if (window.chatWidgetScriptLoaded) return;
      window.ChatWidgetConfig = {
        projectId: "", //this is where your ChatDash projectId will be
      };

      var chatWidgetScript = document.createElement("script");
      chatWidgetScript.type = 'text/javascript';
      chatWidgetScript.src = 
      "https://storage.googleapis.com/cdwidget/dist/assets/js/main.js";
      document.body.appendChild(chatWidgetScript);

      window.chatWidgetScriptLoaded = true;
  })();
</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 widget seamlessly into your website and provide users with an easy way to access it.