Design

// The basic embed code should be copied from the Admin Dashboard.
// In this code example, we have added the `uiConfig` property to
// the global helpshiftConfig object. Everything else is same as
// what you get with the embed code.
<script>
  (function () {
    var PLATFORM_ID = "foo",
    DOMAIN = "bar";

    window.helpshiftConfig = {
      platformId: PLATFORM_ID,
      domain: DOMAIN,
      // Start – UI customization
      uiConfig: {
        global: {
          color: "#2973c7",
          fontFamily: "Lucida Grande"
        },
        widgetFrame: {
          primaryBgColor: "#2973c7",
          primaryTextColor: "#fcfcfc",
          secondaryBgColor: "#666666",
          secondaryTextColor: "#fcfcfc"
        },
        chatWidget: {
          primaryBgColor: "#ffffff",
          primaryTextColor: "#333333",
          secondaryTextColor: "#666666",
          accentColor: "#2973c7",
          errorColor: "#ff0091"
        },
        userBubble: {
          primaryBgColor: "#d2d2d2",
          borderColor: "#d1d1d1",
          primaryTextColor: "#7d7d7d",
          accentColor: "#2973c7",
          errorColor: "#ff0091"
        },
        supportBubble: {
          primaryBgColor: "#666666",
          borderColor: "#777777",
          primaryTextColor: "#fcfcfc",
          accentColor: "#bbb111"
        },
        form: {
          primaryBgColor: "#fcfcfc",
          borderColor: "#d1d1d1",
          primaryTextColor: "#7d7d7d",
          accentColor: "#7d7d7d",
          errorColor: "#ff0091"
        },
        csat: {
          primaryBgColor: "#d2d2d2",
          accentColor: "#666666"
        }
      }
      // End – UI customization
    };
  }) ();

  !function(t,e){if("function"!=typeof window.Helpshift){var n=function(){n.q.push(arguments)};n.q=[],window.Helpshift=n;var i,a=t.getElementsByTagName("script")[0];if(t.getElementById(e))return;i=t.createElement("script"),i.async=!0,i.id=e,i.src="https://webchat.helpshift.com/webChat.js";var o=function(){window.Helpshift("init")};window.attachEvent?i.attachEvent("onload",o):i.addEventListener("load",o,!1),a.parentNode.insertBefore(i,a)}else window.Helpshift("update")}(document,"hs-chat");
</script>

// Call the updateUiConfig API to update the UI configuration.
// You may pass the entire set of Sets and Keys with this API.
Helpshift ("updateUiConfig", {
  global: {
    color: "#333333"
  },
  chatWidget: {
    accentColor: "#2973c7"
  }
});