If you’d like the Messenger to launch from a specific button, link, or element in your app, site, or mobile app, you can create a custom launcher. For example, you can trigger the Messenger to open when a customer clicks on your ‘Talk to us’ button or chat icon. This guide will walk you through the process of creating a custom launcher so that it feels completely integrated into your product, site, or mobile app.
You can add as many custom launchers to your product, or website as you wish.
Create a Custom Launcher on Your Web App or Site
Identify the Element:
Pass the ID of the element you're using as a custom launcher to open the Messenger (e.g., "#my_custom_link"). You can also specify multiple links by passing a class instead (e.g., ".my_custom_class_name").
Add ID or Class to HTML Element:
Add the ID or class to the HTML element that you want the Messenger to open when clicked. For example, if you want the Messenger to open when someone clicks a link to your support email address:
<a id="my_custom_link" href="mailto:[email protected]">Support</a>
Including your support address as the link destination works well as a fallback, so if a visitor doesn't have JavaScript enabled in their browser, they can email your team.
Update Web2Chat Settings:
Add the following line to your Chat snippet:
custom_launcher_selector:'#my_custom_link'
Complete Web2Chat Settings:
Your Chat snippet should look like this:
window.Chat = {
app_id: "YOUR_APP_ID",
custom_launcher_selector:'#my_custom_link'
};Disable the Standard Launcher (Optional):
By following these steps, you can create a custom launcher that seamlessly integrates with your web app or site, providing a tailored user experience and ensuring customers can easily access support when needed.
By following these steps, you can create a custom launcher that seamlessly integrates with your web app or site, providing a tailored user experience and ensuring customers can easily access support when needed.