Customizing the Widget from Page to Page

The Acquire widget works best when it’s easy to spot on your webpage. You may easily change the widget’s appearance in Settings > Messenger Setup > Chat Widget > Appearance. But sometimes you need to change what appears from page to page. To accomplish this, all you need to do is modify the widget code you’ve already placed in the head tag. 

In this article:

• Locating the Code and Parameters
• Modifying the Color
• Modifying the Position 

Locating the Code and Parameters 

The widget code may be found in Settings > Installation and Setup > Web Widget. It will look something like this: 

<!-- Widget Code -->

<script type="text/javascript">

((function(){

window.acquire = window.acquire || [{s:Date.now()}];

var load=function(){

var script="https://account_id.acquire.io/widget.js";

var x=document.createElement('script');

x.src=script;x.async=true;

var sx=document.getElementsByTagName('script')[0];

sx.parentNode.insertBefore(x, sx);

};

if(document.readyState === "complete")

load();

else if (window.addEventListener)

window.addEventListener('load',load,false);

else if (window.attachEvent) {

window.attachEvent("onload", load);

}

})())

</script>

<noscript>

<a href="https://www.acquire.io?welcome" title="live chat software">Acquire</a></noscript>

<!-- / Widget Code -->

After you’ve located the widget code in your codebase, the path parameters of the pages you’d like to make changes to. For example, if you’d like to modify a page with the path parameter for the simulate page’s feature page, the path would be "/simulate?page=features".

Modifying the Widget’s Colors

Once you have the path parameters, you may use if-statements and hex color codes to modify the widget’s appearance. Use the following function to modify the widget’s colors and place it between the sx.parentNode.insertBefore(x, sx);}; and if(document.readyState === “complete”) blocks: 

acquireIO.updateSettings({'crm.primary_color':'hex_color_code'})

In the following example, the simulate page’s contact and features pages were modified:

if(window.location.href.indexOf("/simulate?page=features") > -1){acquire.push(function(app){app.updateSettings({'crm.primary_color':'#00d8d8})})}

The widget will now be teal on the features page. 

Modifying the Position 

Use the function acquireIO.updateSettings({'crm.widget_position':'bl'}) to switch the position of the widget. This function will override the alignment settings in Settings > Installation and Setup > Web Widget.

The widget alignment may be changed in the following ways: 

Left: acquireIO.updateSettings({'crm.widget_position':'bl'})

Right: acquireIO.updateSettings({'crm.widget_position':'br'})

Find additional widget customization options at developer.acquire.io.