Website Widget - Advanced Settings
Text message or live chat directly from your website through a widget.
The Avochato website widget makes it easy to let your customers get in touch with you via text message or live chat directly from your website.
If you’re just getting started with the website widget, please check out our help article here. In this article, we will highlight more of the advanced functionality relating to the widget.
Customize Widget Open
Demonstrating how to open a widget from a customized button.
Once your widget has been embedded on your website’s page, you can use your own customized buttons to trigger the widget to open up. You can also preselect the dropdown option. In the above example, the “Not Yet” option in the dropdown has already been selected.
The required Javascript code is:
Avochato.widgets.widget_id.openWithOption(‘data_option‘)
Your widget_id can be found most easily by going into Avochato > Widgets, and selecting the widget that you have embedded on your website. From that page, you can grab the widget_id from the URL directly. For example here: https://www.avochato.com/accounts/your_account_name/widgets/mQAdyegE4P/ the widget_id is mQAdyegE4P
The data_option parameter maps to the dropdown options that you may have included in your widget. In the above example we used the “new_sales” parameter as the pre-selected option.
If you do not have a dropdown incorporated into your widget, you can also use an empty string as the argument, which will result in the widget opening with no pre-selected options.
Once you have written the appropriate snippet, you can easily incorporate that directly into a button of your choosing. In the above example, it would be:
<button onclick="Avochato.widgets.mQAdyegE4P.openWithOption('new_sales')">Request a Demo</button>In our site, we wrapped the button in additional divs for styling, however any further changes are entirely at your team’s discretion.
A final note – if your team does not want the widget to hover over the page, you can hide the widget entirely until the widget is opened. There is a setting that can be enabled by going to Widgets > Your Widget > Advanced Options. The setting highlighted here, “Hide widget by default on page load” will prevent the widget from showing itself until it has been triggered open.
Customize Widget Close
Very similarly to widget opening, you can also create custom elements to close your widget. In this example, we see a button that closes the widget directly.
The syntax for this behavior is:
Avochato.widgets.widget_id.hide()
In the example that we walked through above, you would simply replace widget_id and implement a button.
<button onclick="Avochato.widgets.mQAdyegE4P.hide()">Close Chat</button>Pop Widget in a New Window
If you want to open the widget in a new window, you can do that most easily by simply including a link. If you have a mobile-only experience, that experience should function as expected. That link should be:
https://www.avochato.com/live_chat/widget_id?o=tThe o=t parameter is important to ensure that in the new window, the widget appears open by default.
If you’re able to provide a button with additional configuration, you may want to add some parameters that will make for a better opening experience. The below button will open the widget in a new window that has no header menu, and is the appropriate size for a chat widget.
<button type="button" onclick="window.open('https://www.avochato.com/live_chat/widget_id?o=t&iframe_domain=your_web_domain', 'Live Chat', 'menubar=no,toolbar=no,width=400,height=780')">Pop Live Chat</button>Embedding the Widget
If your website requires the widget to be embedded directly on the page, you can achieve this by using an iframe. While a little clunky, it does allow you to leave the form pre-opened.
All you need is the widget_id, and you can provide:
<iframe src="https://www.avochato.com/live_chat/widget_id?o=t" width="400" height="650" allow="fullscreen"></iframe>The width and height can be modified to your preference and depending on the size of your widget.