Sometimes, you may want to open DelightChat's self-service widget, live chat or other pages using a custom button on your site. Maybe it's a button on your website menu or footer that says "Chat with us".
You can configure this on your website using deep links.
Available options for deeplinking
Deeplinking can be used to open the self-service widget's home page, but it can also be used for various other cases.
- #delightchat-home
- #delightchat-live-chat
- #delightchat-contact-us
- #delightchat-request-callback
- #delightchat-track-orders
- #delightchat-faqs
Let's call these URL parameters.
Here is a demo of deep links in action on a Shopify store.
How to use deep links with DelightChat's widget
In this section, we'll show you the various ways deeplinking can be implemented on your site and even on your off-site campaigns.
Deep links in Shopify
You can easily add deep links to navigation buttons on your Shopify store. Open the store admin and under "Online Store", select "Navigation".
To add a deep link to any menu item, simply add the corresponding #url-parameter.
For example, you want a button in your Main Menu to open the self-service widget home page. Simply set this as the link in Shopify admin.
Open a DelightChat deep link from any custom button
Deep links can be used with any button on your store, it doesn't necessarily have to be a menu item.
DelightChat provides an API to open, close, toggle, and open any page of the self-service widget.
Note: Share these instructions with a developer in your team. They will easily be able to configure it.
To show the widget on an onclick event, which means when you click on a link or a button, add dcwidget.open() as the onclick property on the custom button or link element.
Let's take an example:
Assume you have a button on your store. Below is its code.
<button class=”widget”>Help</button>
And you want to open the DelightChat widget whenever someone clicks on this button.
Simply add an onclick event to the above button. Here's how it looks:
<button class=”widget” onclick=”dcwidget.open()”>Help</button>
If you want the button to open Live Chat page directly, you can use openLiveChat event.
<button class=”widget” onclick=”dcwidget.openLiveChat()”>Chat</button>
Here is a list of all supported onclick events:
- dcwidget.open()
- dcwidget.openLiveChat()
- dcwidget.openContactUs()
- dcwidget.openRequestCallback()
- dcwidget.openTrackOrders()
- dcwidget.openFAQs()
You can also add DelightChat deep links to the ahref property of any button. Make sure you only include the #url-parameter so that clicking on the link does not open a new page.
For example:
Click <a href="#delightchat-live-chat">here</a> to chat with our support team.
Open a DelightChat deep link from emails or external links
You can also include a deep link to open a specific part of DelightChat's widget outside of your website, such as your marketing campaigns or emails.
For example, if you want to include a link in your email so that visitors land on your website and automatically open the Live Chat screen, add the corresponding #url-parameter to the full page URL of your site.
Try opening this link in your browser: https://www.delightchat.io/#delightchat-home
Need help in setting up deep links on your website? Contact us.
