How to install chat widgets on serverless web apps (thread)
I recently did this for a client with a @webflow site using @MemberstackApp accounts and @intercom.
The same steps apply if you're using another chat widget, like @helpscout, or another hosted site service, like @squarespace, or DIY.
I'll walkthrough for Intercom & HelpScout ➡
The same steps apply if you're using another chat widget, like @helpscout, or another hosted site service, like @squarespace, or DIY.
I'll walkthrough for Intercom & HelpScout ➡
(1) - Install the chat widget.
For @helpscout, slap their provided snippet in the custom code section of your Webflow site.
For @intercom, two steps:
1. Install #GoogleTagManager on Webflow - webflow.com/blog/integrati…
2. Install Intercom with GTM -
intercom.com/help/en/articl…
For @helpscout, slap their provided snippet in the custom code section of your Webflow site.
For @intercom, two steps:
1. Install #GoogleTagManager on Webflow - webflow.com/blog/integrati…
2. Install Intercom with GTM -
intercom.com/help/en/articl…
If you're installing @intercom - create a symbol in Webflow that contains your GTM embed so you can easily add it before the <body> tag on each page.
(2) Identify logged-in users
If the chat widget is just for anonymous visitors, you're good to go. If the site has user accounts, however, you'll want to identify these visitors. This lets you prefill their name, email, and display prior conversations.
If the chat widget is just for anonymous visitors, you're good to go. If the site has user accounts, however, you'll want to identify these visitors. This lets you prefill their name, email, and display prior conversations.
To do this, both @intercom and @helpscout provide a secret key. You need to provide an endpoint that uses this key to hash a user's email and return a signature. Like the bouncer at a club, the endpoint checks IDs to make sure your visitors aren't being impersonated.
But this is a server-LESS web app, so we have nowhere to create an endpoint, and I didn't want to stand-up a server just for this.
Cue @Netlify 's Functions -- toss your secret key in the build environment, export a function like this, and you have a live endpoint.
Cue @Netlify 's Functions -- toss your secret key in the build environment, export a function like this, and you have a live endpoint.
With the endpoint in place, we need to call it when the user logs in, and then pass the signature to the chat widget:
Rad - the widget now knows when your visitors are logged in. You'll want to reset the widget whenever they log out, so someone else using the device can't see their convos.
Calling `Intercom('shutdown')` or `Beacon('logout')` does the trick.
Calling `Intercom('shutdown')` or `Beacon('logout')` does the trick.
(3) Optionally, open the chat widgets from other elements on your page.
We wanted the side nav and a welcome card to open the chat widget when clicked. Both @intercom and @helpscout provide a simple API you can use to open the widget on clicks, scroll locations, events, etc.
We wanted the side nav and a welcome card to open the chat widget when clicked. Both @intercom and @helpscout provide a simple API you can use to open the widget on clicks, scroll locations, events, etc.
Rather than adding custom code for each element, tag any desired element with a custom data attribute, like 'data-of=chat', and then add a click listener for any matching elements. This makes it easy to make changes in the future, and you avoid misplacing code embeds.
That's it! DMs are open if you need help - we installed @helpscout / @intercom on a @webflow site and identified visitors using a #serverless endpoint from @Netlify.
More #code for #nocode and walkthroughs of problem-solving for clients coming soon 🤑
More #code for #nocode and walkthroughs of problem-solving for clients coming soon 🤑
• • •
Missing some Tweet in this thread? You can try to
force a refresh
