How to set up chat / instant messaging on a Webflow site using Talk.js

Hey guys,

Recently I was helping out @dynamo set up a Talk.js integration with a site he was making. I made this demo site to help which I thought could be useful for others.

This demonstrates using the Webflow CMS as a sort of mini database and conditionally passing values into a JavaScript function.

The example in my demo site is of a modelling agency where you can select a model and launch a live chat with their agent. The site’s CMS has 2 collections; agents and models. Each model has a dynamic link to their agent within their entry in the CMS.

On the model’s CMS template page, I pass in the model’s agent’s name, user id and email to the page in plain text. The idea is that you would hide it in a real world situation, but leave it present on the page. This is because behind the scenes there is some custom code which reads this info and passes it into a Talk.js function to initiate chat.

Talk.js set up documentation

My demo site live link

My demo site read only link

Hope this helps someone, somewhere!
Jason

3 Likes

Hi Jason,
This is very helpful information. Thank you for sharing. How would you use a different messenger service? Thank you

Any updates on the same.
I am trying to build integrate a user to user chat room in Webflow

Hi @jasondark, this looks great! I’m trying to replicate this integration but your read-only is 404. Hopefully you’ll read this message and may be able to re-share the read only link.

Cheers !

Hey I passed all my demo sites over to @webdev maybe he could check this out?

Try hitting that link again. It should be active.

@jasondark @webdev you guys rock thanks ! All the best for 2021 !

1 Like

Hey everyone!

If you’re looking to do this still, I made a free template & tutorial on using Talk.js with Webflow & Memberstack - hope it helps!

Hi Julian, Any chance you could do this for Comet? Add Real-Time Text, Voice, & Video Chat to your Application - CometChat - TalkJS pricing is quite high

I will look into it!