0

By "Help Button" (referenced in post title), I mean the <button> element that is added to the page that you click in order to launch the chat frame. In my implementation, it is just a text link on a black background that is added to the DOM and positioned in the lower right corner of the window:

enter image description here

I would like to change the HTML to something custom. I can see there's a method called appendHelpButton in https://service.force.com/embeddedservice/5.0/esw.min.js that creates the various elements, populates them with the appropriate text, CSS classes and event handlers. This file appears to have several other methods that would be useful to be able to customize however I'm assuming this is a global file that is used by all Einstein bots on all websites.

Is there a setting somewhere that I can specify to override those defaults?

This is the roughly code currently being used to embed the bot in my website:

var initESW = function (gslbBaseURL) {
  embedded_svc.settings.displayHelpButton = true; //Or false
  embedded_svc.settings.language = "en-US"; //For example, enter 'en' or 'en-US'

  embedded_svc.settings.chatbotAvatarImgURL =
    "https://www.example.com/wp-content/uploads/2020/11/bene-ico_full-color.svg";

  embedded_svc.settings.defaultMinimizedText =
    "Greetings! We're here to help. Click to ask a question or start a conversation."; //(Defaults to Chat with an Expert)

  embedded_svc.settings.enabledFeatures = ["LiveAgent"];
  embedded_svc.settings.entryFeature = "LiveAgent";

  embedded_svc.init(
    "https://example1.my.salesforce.com",
    "https://example1.force.com/help",
    gslbBaseURL,
    "zzzzzzzzzzzzzzz",
    "Example_Helper",
    {
      baseLiveAgentContentURL:
        "https://c.la2-c1-ia2.salesforceliveagent.com/content",
      deploymentId: "xxxxxxxxx",
      buttonId: "yyyyyyyyyyyyyy",
      baseLiveAgentURL: "https://d.la2-c1-ia2.salesforceliveagent.com/chat",
      eswLiveAgentDevName:
        "EmbeddedServiceLiveAgent_Parent04I1U000000kCUYUA2_174db8f6ffe",
      isOfflineSupportEnabled: true,
    }
  );
};

if (!window.embedded_svc) {
  var s = document.createElement("script");
  s.setAttribute(
    "src",
    "https://example1.my.salesforce.com/embeddedservice/5.0/esw.min.js"
  );
  s.onload = function () {
    initESW(null);
  };
  document.body.appendChild(s);
} else {
  initESW("https://service.force.com");
}

In addition to this code I have tried to manually insert the following code snippet:

<div class="my-custom-chatbot-button online">
    <a id="liveagent_button_online_yyyyyyyyyyyyyy" href="javascript://Chat" style="display: none;" onclick="liveagent.startChat('yyyyyyyyyyyyyy')">
       <!-- Online Chat Content -->
       Greetings. We're here to help - click to ask a question or start a conversation.
   </a>
</div>
<div class="my-custom-chatbot-button offline">
    <div id="liveagent_button_offline_yyyyyyyyyyyyyy" style="display: none;">
       <!-- Online Chat Content -->
       Currently Offline
   </div>
</div>

<script type="text/javascript">
   if (!window._laq) { window._laq = []; }
   window._laq.push(function(){liveagent.showWhenOnline('yyyyyyyyyyyyyy', document.getElementById('liveagent_button_online_yyyyyyyyyyyyyy'));
   liveagent.showWhenOffline('yyyyyyyyyyyyyy', document.getElementById('liveagent_button_offline_yyyyyyyyyyyyyy'));
   });
</script>

After the above script initializes, the appropriate button (offline or online) is displayed, however clicking the button displayed when the bot is online opens the chat frame in a new browser window... which is not the expected/desired behavior.

If someone could point me in the right direction for being able to provide custom markup to be displayed in place of that default button OR how to get the chat frame to open in the same browser window as the button (using the 2nd code snippet), I'd be most appreciative.

0

SUPER simple answer - obtained from https://developer.salesforce.com/docs/atlas.en-us.snapins_web_dev.meta/snapins_web_dev/embedded_services_web_bootstrap_chat.htm

Here’s an example of how to apply this API. Hide the default Salesforce chat button and replace it with a button that matches your company’s brand.

To hide the standard button, include this line in your embedded code snippet: embedded_svc.settings.displayHelpButton = false;.

On click of your company’s branded button, invoke embedded_svc.bootstrapEmbeddedService(); to surface the chat experience for your end user.

To show a basic button that invokes the bootstrapEmbeddedService() function:

<script type='text/javascript'>
    function bootstrapChat() {
        embedded_svc.bootstrapEmbeddedService();
    }
</script>
<button onclick="bootstrapChat()">
    Click me to show the Embedded Chat experience.
</button>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.