Embeddable widgets are designed to be used on any pages of websites or applications. Based on triggers or chatbots you can provide proactive support and set up specific open or send message actions based on user activity on a website or sent incoming messages.
But sometimes you have custom use cases that you need to implement that are described below.
Note: Authentication of users in widgets using SSO is described in another article.
Custom URL to Open Widget
In order to open widget with the link on your website, instead of the tab provided, you can use the following guide:
- Add widget code generated in your widget profile to your web page;
- Add "ursdk-viewport-maximize" attribute with the proper widget id to any HTML element by clicking on which you are going to open the widget. Example:
<p>Feel free to <span ursdk-viewport-maximize="6"> contact our support </span></p>
In this case, you trigger the widget by clicking the "contact our support" link.
Integrate Widget to Pop-Up on Click
If you want to initiate a chat widget on link click that is located at contacts or other pages of your website, follow the below instructions.
- Add widget code on that page taken from Administration » Support Channels » Widget » Edit the necessary widget profile;
- Add a similar link but with your title in the required place:
<a class="live-chat-link" href="#">Support Center</a>
- Add inline javascript on that page or to your js file:
<script type="text/javascript">
$('.live-chat-link').on('click', function(e) {
e.preventDefault();
$('.UR_chatHandleTab .UR_iWidget').get(0).click();
});
</script>
You can modify the code to use your own id or class in the link and javascript. Note: be sure to replace .UR_Widget class with the required widget to be opened. Here are all the classes:
- UR_iWidget - chat widget;
- UR_iWidgetTopic - feedback widget;
- UR_iWidgetTicket - contact form;
- UR_iWidgetKb - knowledge base;
- UR_iTelegram - telegram;
- UR_iFacebook - fb messenger widget;
- UR_iVk - vkontakte widget;
- UR_iViber - viber;
- UR_iWhatsapp - whatsapp widget;
- UR_iWechat - wechat widget;
- UR_iLine - line widget;
- UR_iLink - custom url widget.
Alternatively, you can use the script without jQuery:
<script type="text/javascript">
const chatButtons = document.getElementsByClassName('live-chat-link');
for (let chatButton of chatButtons) {
chatButton.onclick = function(event) {
event.preventDefault();
document.getElementsByClassName('UR_iWidget')[0].click();
}
}
</script>
Note: for the required widget to be opened, please replace UR_iWidget with the required one listed above the code.
If you want for the widget to be hidden even when support agents are online, add the following inline style or to your CSS file:
<style>
.UR_chatHandleTab:not(.UR_chatTabExpanded):not(.UR_chatOpened) {
display: none !important;
}
</style>
Opening Chat by Default
If you want the chat widget to open on page load, add inline javascript on that page or to your js file:
<script type="text/javascript">
sessionStorage.setItem('urchat_isOpen', widget_type);
</script>
where widget_type is the type of widget you want to open: topic, ticket, chat, kb