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

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 !

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!