How to Add a Chat Widget to your Dubsado Forms
It may seem superfluous to add a chat widget on your Dubsado forms. I get it. But hear me out! Let’s say you’re a designer and you’ve just finished an entire branding suite for your client. You’re using a proposal to showcase the work completed as a presentation to send to your client. What if there was a way for your client to communicate with you, on the fly, without having to open their email and request changes? What if they could simply send over a quick message, directly from your proposal form?
Sound familiar? No? Am I the only person who does this? (probably). Whatever your process is, you might find embedding a chat widget on your forms beneficial some day.
In this tutorial you’ll learn how to add chat systems to your Dubsado forms using the following platforms:
Facebook Messenger
Chatra
Adding Facebook Messenger’s chat plugin
Facebook is great for messaging and we can certainly embed their chat plugin on a Dubsado form. However, one thing to keep in mind, not everyone uses Facebook and you might be limiting your spectrum of prospects and/or clients. But if you’re sold on using Facebook Messenger, then continue reading to learn how to add the plugin to your forms.
First, head over to your Facebook Business Suite, click Inbox > Chat Plugin > Set Up. Go through the steps, and include your Dubsado form URL when prompted (which is Step 2: Add Domains). Be sure to use the public link from your form, and not the URL that shows inside of your Dubsado form preview. Copy your code, click Next then click Finish, and finally, click Publish.
Back on your Dubsado form, Drag a HTML block onto your Dubsado form. Delete the example code, then copy and paste your code. Where you see the first <script> tag, replace this tag with the following:
The Code
This is your Javascript. Add an HTML Block onto your Dubsado form. Delete the example code, then copy and paste the following code into the block:
<script type="application/javascript">
Then, save and preview your form to see if your Facebook chat plugin is working.
Adding Chatra’s messaging widget
Chatra is a platform you can utilize for live chats, chat bots, email and social messaging for your business. In fact, I love it so much that I’m using Chatra for our form generator (Genie) site! It’s a great tool to talk to our customers in real-time, if they ever need help. You can even link your email and social media accounts for an all-in-one messaging service. And now, you can add it to your Dubsado forms.
The first thing you should do if you haven’t already, is to create a free account over on Chatra. Once you get yourself set up, click Settings > Chat widget > click “Show setup instructions.” You’ll see a code box with your widget snippet. If you copy this code and paste into a Code Block on your Dubsado form, the code will not work! We have to modify the code in order for the widget to display on your form.
Instead, only copy your Chatra ID, highlighted above for you to reference.
The Code
This is your Javascript. Add an HTML Block onto your Dubsado form. Delete the example code, then copy and paste the following code into the block:
<!-- Chatra {literal} -->
<script type="application/javascript">
(function(d, w, c) {
w.ChatraID = 'YOUR CHATRA ID';
var s = d.createElement('script');
w[c] = w[c] || function() {
(w[c].q = w[c].q || []).push(arguments);
};
s.async = true;
s.src = 'https://call.chatra.io/chatra.js';
if (d.head) d.head.appendChild(s);
})(document, window, 'Chatra');
</script>
<!-- /Chatra {/literal} -->
Update the Chatra ID with your ID where you see YOUR CHATRA ID
Make sure you do NOT delete the straight single quotes wrapping the value (your Chatra ID).
Then, save and preview your form to see if the widget is working.
And there it is! A perfectly neat-o way to be able to communicate with your prospects and clients on the fly, directly from your Dubsado forms.
