Intercom Custom Launcher In Webflow

Design help Custom code
1

Hi,

I am trying to add an intercom custom launcher from a button in webflow. I have followed the intercom help doc: Customize the Intercom Messenger (technical) | Help Center

But it doesn’t work. When I add the additional custom code it also makes the standard launcher disappear.

Here is a read only link to the project im testing it in: https://preview.webflow.com/preview/intercom-test-b27bce?utm_medium=preview_link&utm_source=dashboard&utm_content=intercom-test-b27bce&preview=9f9bad4fda85408f24ba1f1ec1e0ae51&mode=preview

Thanks

2

@Billy_Donnan - please post a published site link, can’t test custom code in the designer.

3

Just as a heads up, you can grab the published URL from the share link—assuming they’ve published the project:

…/preview/intercom-test-b27bce?utm_medium=preview_link…

In this case the site has been published and you can check it out here.

1 Like
4

@Billy_Donnan - this syntax is not valid:

image

Instead you could use an ID or a class (for multiple launchers), so something along the lines of:

<a href="#" class="intercom-launcher" class...>Launch</a>

or

<a href="#" id="intercom" class...>Launch</a>

then change your custom_launcher_selector value appropriately.

5

Hi @Billy_Donnan ,

I am having this exact same issue. Did you manage to get it working in the end?

At the end of my patience with it now!

Thanks in advance!

6

I have the same issue. Does anyone else have an idea?

7

Has anyone figured this out yet? I’ve followed the intercom documentation as well and tried passing ID or class, but nothing happens!

I know Webflow adds their .w-button class to default buttons, so I tried as a combo class as well in the intercom script in the page settings. Didn’t work either way.

UPDATE:

I figured this out, and got this to work, if anyone in this thread still needs help. In my case it was because I was missing a single “,” in the code lol, which is usually the case with these things.

8

Hey @drungsea can you share the snippet you ended up implementing? I cannot figure out how to just get the intercom messenger to open up on the button clicks.

This is the code I am using now:

<script>
  window.intercomSettings = {
    app_id: "wy7wv5c1"
  };
</script>

<script>
// We pre-filled your app ID in the widget URL: 'https://widget.intercom.io/widget/wy7wv5c1'
(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/wy7wv5c1';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>```
9

Yes, it should actually be as easy as they (intercom) says it is in their docs and your code is the same as mine (minus app ID of course)

What you’re missing after app_id: "wy7wv5c1", is custom_launcher_selector: '.YOUR-BUTTON-CLASS-NAME'.

Don’t forget the comma after "wy7wv5c1".

And if you’re using IDs instead of class names, don’t forget to use #YOUR-BUTTON-ID in place of the class name, and then type that into the ID field of your button in the settings panel!

That should be it, I hope this works for you!

Mine looks like this:
<script> window.intercomSettings = { app_id: "xxxxxx", custom_launcher_selector:'.button-intercom' }; </script>

1 Like