Include live chat
in your Webflow site.

see the demo

About

This demo site uses the talk.js library to provide live chat functionality. The example given here is of a website that displays models' profiles, the idea being that someone could come onto this website, see a model's profile, then begin a live chat with that particular model's agent.

This site has 2 CMS collections; models and agents. Each model is linked to their corresponding agent by a dynamic field in the Webflow CMS. From within the Webflow designer go and check this out.

How talk.js is implemented in this site

Within the Webflow designer, go to the model template page and look at the body custom code. Copy this and paste it into your favourite code editor so that you can read it properly and see what is going on. You will see that we declare 2 variables; agentId and agentName. These both come from the model's corresponding agent's CMS fields. We then pass these into the Talk.js function that creates the chat container.

You could very easily expand this and add more variables to pass to Talk.js like the agent's profile pic and email address.