Answered

How do I open the Messenger on a click?


Userlevel 2
Badge

I want to open the Messenger when a certain button on my site is clicked, how do I set this up?

icon

Best answer by Eric Fitz 26 June 2020, 12:27

View original

11 replies

Userlevel 1

If you want the Messenger to open when a button on your site is clicked, you can build what’s called a “custom launcher”. This guide will show you how to create a custom launcher.

Hi Eric

 

Thanks for sending the article. How does this work with a shopify page. I can't find a way to integrate the code. I know the ID or Class of the button but where do I the code to allow the custom launcher to work?

 

Thanks!

Userlevel 1

Hey @jan d​, if you're installing the Messenger on your Shopify page using our official integration, you wouldn't be able to amend it to use a custom launcher.

 

A possible workaround here would be, instead of using our integration, to install Intercom's JS snippet directly on your Shopify page - I found this tutorial on how to install custom JS on Shopify online.

 

Keep in mind, though, that we don't officially support this, and it's not something that I've ever tried myself, so I can't guarantee that it would work - I'm thinking in hypothetical terms here!

 

Another Connector may be able to confirm this for me - @roy s11​, have you ever tried installing custom JS in Shopify?

Thansk Eric. I thought so, but you never know.

Badge

Thanks for tagging @eric f11​ , Happy to help.

 

@jan d​ , Intercom works perfectly with Shopify.

 

Keep in mind that Shopify disabled any "custom JS" (for security purposes) on the Checkout page. This restriction applies to accounts registered after 2019 Year. 

 

That means - Intercom messenger will not be available during checkout, it's not possible for customers to ask for help during checkout :(

 

Outgoing messages - chat's, post also will not work during checkout.

 

If you require Intercom on the checkout page, The best workaround here is to go to Shopify Plus.

 

@eric f11​ , Maybe Partnership managers also send some feedback to Shopify about this case? Maybe they will lift restrictions only for the Intercom app? 

 

Intercom is a secure platform, maybe this will help? Shopify made by an amazing team, they are really caring for their customer security.

Hi Roy Sh. thanks for replying. I don't want to run the launcher on the checkoutpage. Just a link on the homepage.

 

To be precise I want to turn a 'chat now' CTA into an actual launcher for the intercom bubble.

 

J

Badge

Hello @jan d​ , Here's the instruction how you can do it:

 

1. Go to Shopify -> Online Store -> Themes -> Action -> Edit Code:

Shopify2. Find theme.liquid and add following code until </body> </html> tag and click "Save":

============================================================

<script>

 var APP_ID = "IntercomAPPID"; // Replace this with your workspace ID

 

 window.intercomSettings = {

  app_id: APP_ID,

  custom_launcher_selector:'#Intercom_Chat'

 };

</script>

<script>(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/#39; + APP_ID;var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);};if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})();</script>  

============================================================

Shopify13. Now go "Contact Us" page and switch to code editor :

Shopify24. Add following code and click "Save":

============================================================

<a id="Intercom_Chat" href="mailto:HELP@YOUR-APP.COM">Live Chat</a>

============================================================

Shopify35. Result: https://drive.google.com/file/d/1rcyQ9c3h8IfgYqWDDmFDjVWmhFz248wX/view/p>

 

Hope this helps.

 

 

Roy, you're a hero! 🙌

Userlevel 1

Can confirm; Roy is indeed a hero.

Hey, guys!

How to create several custom launchers for 1 page?

I have 3 buttons, each with different id. I want to trigger chat openning when a user taps any of these buttons. Now I don't know how to do this because I can specify only 1 key (button ID) in window.intercomSettings

@roy s11​ do you know if it’s possible to get a button to link from an email to open the website with the messenger open? We have support tickets that come through email that we really want to autoreply to funnel them to the message and it only really works if they can just click a button and it directly opens the site and the messenger. 

Reply