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.