How to add a chat widget to a website




To add a chat bubble to your website/landing page, you'll want to use this code in your Header or Footer.

You'll need to replace the 'Location ID', with the location ID in the URL. (i.e. W8SqkDJCYwyQyC8jSVuZ)

 

Raw code: 


<script src="https://msgsndr.com/js/text_widget.js"></script>
<script type="text/javascript">
HIGHLEVEL.init('LOCATION_ID', {
heading: 'Have a question?',
subHeading: 'Enter your question below and someone from our team will get right back to you.'
})
</script>


Example code with location id:


<script src="https://api.gohighlevel.com/js/text_widget.js"></script>
<script type="text/javascript">
HIGHLEVEL.init('W8SqkDJCYwyQyC8jSVuZ', {
heading: 'Have a question?',
subHeading: 'Enter your question below and someone from our team will get right back to you.'
})
</script>


Once you have a chat widget set up, you'll want to configure a Trigger to send a notification when a conversation is initiated via the chat widget. To do this, the trigger event should be "Customer Replied" with a filter for "Reply Channel" set to "Chat Widget" like this: 



Then on the Actions side, you'd want to either "Send Email" and/or "Send SMS". Tip: use the "Message Body" custom value in your notification email/text to display the message that the user entered into the chat widget.



How To Add An Email Field To The Chat Widget


If you'd like to collect an email as well as the phone number in the chat widget, add the following to the embed code:


Example code:

<script type="text/javascript"> HIGHLEVEL.init('LOCATION_ID', { heading: 'Have a question?', subHeading: 'Enter your question below and someone from our team will get right back to you.', useEmailField: true }) </script>