When using Medallia Concierge's chat widget on your website, a chat bubble icon will appear to the bottom right on the page.
There are three features that can be customized:
Widget background color
The white chat image
In-app business image
In order to change these properties, locate the following code from within the webchat script you added to your site;
<script> Medallia Concierge.init({appId: '<app-id>'}).then(function() { // Your code after init is complete });</script>Next, replace the "// Your code after init is complete" with the following javascript code, so that the entire script block looks like this:
<script>
Zingle.init({appId: '<app-id>'}).then(function() {
// modify the background color here
var bgcolor = "#d2b5a4";var bizicon = document.getElementById('web-messenger-container').contentWindow.document.querySelector('.app-icon');var chaticon = document.getElementById('web-messenger-container').contentWindow.document.querySelector('.messenger-button-icon');// replace this html with the svg code of the new business icon you want to usevar newbizicon = '<svg class="app-icon" viewBox="0 0 80 80" style="shape-rendering: geometricprecision;"><rect fill="#2ebbf2" x="31.3" y="39.5" width="4.4" height="4.4"></rect><rect fill="#2ebbf2" x="31.3" y="30.8" width="4.4" height="5.8"></rect><path fill="#2ebbf2" d="M48.7,52.6v-5.8h-4.4v33c3-0.3,5.9-1,8.7-2V52.6H48.7z"></path><path fill="#2ebbf2" d="M56,64.2v12.5c2-0.9,4-1.9,5.8-3.1v-9.3H56z"></path><path fill="#2ebbf2" d="M18.2,64.2v9.3c1.8,1.2,3.8,2.3,5.8,3.2V64.2H18.2z"></path><path fill="#2ebbf2" d="M38.5,46.8V80c0.5,0,1,0,1.5,0s1,0,1.5,0V46.8H38.5z"></path><path fill="#2ebbf2" d="M31.3,46.8v5.8h-4.4v25.2c2.8,1,5.8,1.7,8.7,2v-33L31.3,46.8L31.3,46.8z"></path><rect fill="#2ebbf2" x="44.4" y="30.8" width="4.4" height="5.8"></rect><rect fill="#2ebbf2" x="38.5" y="39.5" width="2.9" height="4.4"></rect><path fill="#2ebbf2" d="M80,40C80,17.9,62.1,0,40,0S0,17.9,0,40c0,12.3,5.6,23.9,15.3,31.4V59.7c0-0.7,0.6-1.3,1.3-1.3h0h4.5V51 c0-0.7,0.6-1.3,1.3-1.3h4.5V26.3c0-0.7,0.6-1.3,1.3-1.3h7.4V19c0-0.7,0.6-1.3,1.3-1.3c0,0,0,0,0.1,0h1.6V7.5C38.6,6.7,39.2,6,40,6 c0.8,0,1.5,0.7,1.5,1.5v10.2H43c0.7,0,1.3,0.6,1.4,1.3c0,0,0,0,0,0v6h7.4c0.7,0,1.3,0.6,1.3,1.3v0v23.4h4.8c0.7,0,1.3,0.6,1.3,1.3 v7.6h4.2c0.7,0,1.3,0.6,1.3,1.3v0v11.5C74.4,63.9,80,52.3,80,40z"></path><rect fill="#2ebbf2" x="38.5" y="30.8" width="2.9" height="5.8"></rect><rect fill="#2ebbf2" x="44.4" y="39.5" width="4.4" height="4.4"></rect><g><path fill="transparent" d="M56,76.7V64.2h5.8v9.3c1-0.7,2-1.3,2.9-2.1V60c0-0.7-0.6-1.3-1.3-1.3h-4.2V51c0-0.7-0.6-1.3-1.3-1.3h-4.8V26.3 v0c0-0.7-0.6-1.3-1.3-1.3h-7.4v-6c0,0,0,0,0,0c0-0.7-0.6-1.3-1.4-1.3h-1.5V7.5c0-0.8-0.7-1.5-1.5-1.5s-1.5,0.7-1.5,1.5v10.2H37 c0,0,0,0-0.1,0c-0.7,0-1.3,0.6-1.3,1.3V25h-7.4c-0.7,0-1.3,0.6-1.3,1.3v23.4h-4.5c-0.7,0-1.3,0.6-1.3,1.3v7.4h-4.5 c-0.7,0-1.3,0.6-1.3,1.3v11.7c0.9,0.7,1.9,1.4,2.9,2.1v-9.3H24v12.4c1,0.4,1.9,0.8,2.9,1.1V52.6h4.4v-5.8h4.4v33 c1,0.1,1.9,0.2,2.9,0.2V46.8h2.9V80c1,0,1.9-0.1,2.9-0.2v-33h4.4v5.8h4.4v25.2 M35.6,43.9h-4.4v-4.4h4.4V43.9z M35.6,36.6h-4.4 v-5.8h4.4V36.6z M41.5,43.9h-2.9v-4.4h2.9V43.9z M41.5,36.6h-2.9v-5.8h2.9V36.6z M48.7,43.9h-4.4v-4.4h4.4V43.9z M48.7,36.6h-4.4 v-5.8h4.4V36.6z"></path><path fill="transparent" d="M56.1,76.6C56.1,76.7,56,76.7,56.1,76.6L56.1,76.6C56,76.7,56.1,76.7,56.1,76.6z"></path><path fill="transparent" d="M18.2,73.6C18.2,73.6,18.2,73.6,18.2,73.6L18.2,73.6C18.2,73.6,18.2,73.6,18.2,73.6z"></path></g></svg>';// replace this html with the svg code of the new chat icon you want to usevar newchaticon = '<svg style="margin: 0 auto;" width="35px" height="35px" viewBox="0 0 69 85" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="icon-mark" fill="#FFFFFF"> <path d="M58.56977,0.12718 L10.43023,0.12718 C4.713662,0.12718 0,4.33939 0,9.55451 L0,60.60247 C0,65.81759 4.713662,70.0298 10.43023,70.0298 L16.54796,70.0298 L28.78343,70.0298 L39.21366,70.0298 L56.86482,84.7725287 C57.36627,84.8728179 57.66714,84.5719504 57.76744,83.869911 L59.87354,69.9295 C64.98836,69.32776 69,65.41642 69,60.60247 L69,9.55451 C69,4.33939 64.28633,0.12718 58.56977,0.12718" id="Fill-1"></path> </g> </g></svg>'bizicon.innerHTML = newbizicon;chaticon.innerHTML = newchaticon;document.getElementById('web-messenger-container').contentWindow.document.querySelector('.messenger-button-icon').style.backgroundColor = bgcolor;document.getElementById('web-messenger-container').contentWindow.document.querySelector('.messenger-button-icon').style.display = "flex";document.getElementById('web-messenger-container').contentWindow.document.querySelector('.messenger-button-icon').style.alignItems = "center";document.getElementById('web-messenger-container').contentWindow.document.querySelector('.header-wrapper').style.backgroundColor = bgcolor;
});
</script>
To change the color of the widget background, update the background color variable in the first line.
The update the business and chat icons, update the code above with the svg code for the new business and chat icons.
Customizations such as chat window location are not supported at this time.