{"id":745,"date":"2021-06-09T10:39:21","date_gmt":"2021-06-09T05:09:21","guid":{"rendered":"https:\/\/docs.kore.ai\/smartassist\/?p=745"},"modified":"2021-06-09T10:39:21","modified_gmt":"2021-06-09T05:09:21","slug":"chat-widget","status":"publish","type":"post","link":"https:\/\/multisite.korebots.com\/multisite-2\/chat-widget\/","title":{"rendered":"Chat Widget"},"content":{"rendered":"

<\/span>Chat Widget Personalization<\/span><\/h3>\n

On SmartAssist, you can modify the overall look, icons, and colors of the chat widget for an agent.<\/p>\n

To personalize the chat widget, follow these steps.<\/p>\n

1. Navigate to System Setup > Widgets<\/strong>\u00a0and click the Chat Widget Personalisation<\/strong> tile.<\/p>\n

\"\"<\/p>\n

2. In the Chat Widget Personalisation<\/b> window, you can configure the following:<\/p>\n

<\/span>General Settings<\/span><\/h4>\n

This option lets you set the widget theme and text font. To configure them, follow these steps:<\/p>\n

    \n
  • Select an option for Theme from the dropdown list to set the widget theme.<\/li>\n
  • Select an option for Font<\/b> from the dropdown list to set the text font. The available options include:\n
      \n
    • Arial<\/li>\n
    • Inter<\/li>\n
    • Lato<\/li>\n
    • Sans<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n

      \"\"<\/h4>\n

      <\/span>Header Design<\/span><\/h4>\n

      This option lets you change the widget\u2019s header appearance. To configure the various options, follow these steps:<\/p>\n

      1. Enter a value for Assistance Name <\/b>and for Description<\/strong>.<\/p>\n

      \"\"<\/p>\n

      2. Click Upload<\/b> and select an image (.PNG file) to set the logo.<\/p>\n

      \"\"<\/p>\n

      3. Upon successful upload, a confirmation message is displayed.<\/p>\n

      4. Select the colors for Background<\/strong> and Text <\/strong>from their respective selection panels, and click Apply.<\/strong><\/p>\n

      \"\"\"\"<\/p>\n

      5. Select options from Template <\/strong>to set the header and text appearance.<\/strong><\/p>\n

      \"\"<\/h4>\n

      <\/span>Body Design<\/span><\/h4>\n

      To set the background color and the time of delivery appearance in the chat window, follow these steps:<\/p>\n

      1. Click on the color code that appears below Background Color<\/strong>, select the color as required, and click Apply<\/strong>.<\/p>\n

      \"\"<\/p>\n

      2. To view the message delivery time, change the option for Do you want to display the time of Delivery? <\/strong>to Yes<\/strong>.<\/p>\n

      \"\"<\/h4>\n

      <\/span>User Message<\/span><\/h4>\n

      To set the background and text colors, and the user icon in the user message chat window, follow these steps:<\/p>\n

      1. For Background Color<\/strong>, click the color code tab, select the desired color and click Apply<\/strong>.<\/p>\n

      2. To set Text Color<\/strong>, click the color code tab, select the color and click Apply<\/strong>.<\/p>\n

      \"\"<\/p>\n

      3. To view the user icon set by you, change Do you want to use User Icon in the chat window? <\/strong>option to Yes<\/strong>.<\/p>\n

      4. To update the user icon, click Upload<\/strong>, and select the new image.<\/p>\n

      <\/span>Bot Message<\/span><\/h4>\n

      This feature helps change the background, text, button, and button text colors, and the bot icon in the chat window.<\/p>\n

      To configure Bot Message, follow these steps:<\/p>\n

        \n
      1. Set the Background Color<\/strong>, Text Color<\/strong>, Button color<\/strong>, and Button Text Color.<\/strong> To configure these options, follow these steps:<\/li>\n<\/ol>\n
          \n
        • Click the color code tab.<\/li>\n
        • Select the desired color.<\/li>\n
        • Click Apply<\/strong>.<\/li>\n<\/ul>\n

          \"\"<\/p>\n

          2. Set Do you want to use Bot Icon in the chat window? <\/strong>option to Yes. This will display the bot icon in the chat window.<\/p>\n

          \"\"<\/p>\n

          3. Click Upload <\/strong>and select a new image, if you want to update the bot icon.<\/p>\n<\/div><\/div>

          Note:<\/strong> Only .PNG files are supported for both bot and user icons.<\/p>\n<\/div><\/div>

          4. After completing the configurations, click Save<\/strong>.\u00a0A success confirmation message is displayed confirming the updates.<\/p>\n<\/div><\/div>

          <\/div>

          <\/span>Deployment Code<\/span><\/h3>\n

          This feature helps get the instructions and the deployment code for a chat widget on web and mobile. You can whitelist domains to integrate the SmartAssist chat widget with this configuration.<\/p>\n

          To configure the options, follow these steps:<\/p>\n

          1. On the left pane, click System Setup > Widgets<\/strong>\u00a0and then, click the Deployment Code<\/strong> tile.<\/p>\n

          \"\"<\/p>\n

          2. In the Deployment Code <\/strong>window, paste the chat widget code in the textbox for Deploy a Chat Widget on your Website.<\/strong><\/p>\n

          \"\"<\/p>\n

          3. Add or delete the domains to be whitelisted.<\/p>\n

          To add the whitelisted domains, follow these steps:<\/p>\n

            \n
          • Under Allowed Domains<\/strong>, click + Add a domain.<\/strong>
            \n\"\"<\/li>\n
          • Enter the domain name in the textbox.<\/li>\n
          • To delete an existing domain, click the delete<\/b> icon of the entry.<\/li>\n<\/ul>\n

            4. Click Save<\/b>. A success confirmation message is displayed.<\/p>\n

            \"\"<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div><\/section>\n","protected":false},"excerpt":{"rendered":"Chat Widget Personalization On SmartAssist, you can modify the overall look, icons, and colors of the chat widget for an agent. To personalize the chat widget, follow these steps. 1. Navigate to System Setup > Widgets\u00a0and click the Chat Widget Personalisation tile. 2. In the Chat Widget Personalisation window, you can configure the following: General...","protected":false},"author":23,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/multisite.korebots.com\/multisite-2\/wp-json\/wp\/v2\/posts\/745"}],"collection":[{"href":"https:\/\/multisite.korebots.com\/multisite-2\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/multisite.korebots.com\/multisite-2\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/multisite.korebots.com\/multisite-2\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/multisite.korebots.com\/multisite-2\/wp-json\/wp\/v2\/comments?post=745"}],"version-history":[{"count":0,"href":"https:\/\/multisite.korebots.com\/multisite-2\/wp-json\/wp\/v2\/posts\/745\/revisions"}],"wp:attachment":[{"href":"https:\/\/multisite.korebots.com\/multisite-2\/wp-json\/wp\/v2\/media?parent=745"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/multisite.korebots.com\/multisite-2\/wp-json\/wp\/v2\/categories?post=745"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/multisite.korebots.com\/multisite-2\/wp-json\/wp\/v2\/tags?post=745"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}