We've built a prayer chat on our public website that connects individuals to an individual member of our prayer team for live chat. This requires an external service, of which there are many. After some testing, we settled on Tawk.To. It's free, it does everything we need it to do at this moment, and it has capabilities for future integration as we get further along.

Screen_Shot_2020-04-06_at_1.41.06_PM.png

Adding a code snippet from tawk.to to our page header gives a floating chat widget that stays in the bottom right no matter where on the page you are.

Screen_Shot_2020-04-06_at_1.42.12_PM.png

Chat is live and immediate. Here's the front end (the floating widget on our website):

Screen_Shot_2020-04-06_at_1.55.56_PM.png

And here's the chat interface on the back end (the agent view when logged into Tawk.to):

Screen_Shot_2020-04-06_at_1.56.48_PM.png

Setting up the chat instance to work on your Rock website is very straightforward.

  1. First, set up an account on https://www.tawk.to/.
  2. Once you've logged in and made it to your dashboard, look for the "Administration" gear in the bottom left corner.
  3. Choose "Chat Widget" from the list of options.
  4. Set up your chat widget to look how you'd want: you can customize the icon, the color, the schedule, the default text content, and so on. Once you're ready, roll your mouse over the "Widget Code" section and click "Copy to Clipboard."
  5. In Rock's CMS, open the page to which you want to add the widget. Open up "Page Properties," go to "Advanced Settings," and copy the tawk.to code into the header content.

Congrats! You now have an agent-style chat widget on your website!