Streaming live at 10am (PST)

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!


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