How to Embed Google Chat in your Website
In this article, we're going to show you how you can easily embed Google Chat in your website as a live chat widget so you can talk to your website customers right from Google Chat. With a simple code snippet, you can enable an advanced live chat application that can route to any Google Chat space or user so you can answer chats and offer great customer service right within Google Chat. You can also enable advanced AI features like a chatbot trained on your website content to build the best hybrid AI and live chat agent customer service solution.
Here are some things you can do with your embedded Google Chat:
- Pre-qualify your leads with a pre-sales page
- Answer chats from any space in Google Chat
- Answer chats as Direct Messages in Google Chat
- Customize your chat colors, text, logos, and hours of operation
- Create chat history reports and dashboards
- Integrate your chat leads with 100's of 3rd party systems
Here's a step by step guide to embedded Google Chat in your website with Social Intents.
Prerequisites
- A Google Chat or Gmail Workspace account: https://chat.google.com
- A Social Intents Account: https://www.socialintents.com
High Level Steps
- Add Live Chat app to Google Chat
- Customize your Live Chat Settings
- Preview your Live Chat widget
- Embed Live Chat for Google Chat in your website
Let's get started.
1. Add Live Chat app to a Google Chat space
The first step to add Live Chat to Google Chat is install Live Chat from the Google App Marketplace or to go to your Spaces in your Google account either in Google Chat or in Gmail and clicking on Find Apps within a space. You can add the Live Chat app to any existing or new space by selecting the space and then choosing the Add people & apps link.
Next search on the 'Live Chat' app in the search field.
You can also just click the '+' button next to the message field to add an application as seen below.
Once you add the Live Chat application, you'll receive a welcome message form our chat bot with some slash commands you can use as well las getting started links including a Preview Chat link that you can use to test our your Live Chat integration. This welcome also includes a link to Sign in to Live Chat here on Social Intents.
2. Login and Customize your Live Chat Settings
Next, you can login to your Live Chat account at Social Intents to customize your chat widget settings. Once you've added the Live Chat app to a space, you already have an account with us. Simply click 'Sign in with Google' and use the same email address where you added the live chat app.
Once you login, you'll see the Dashboard in Social Intents. To access your settings, select 'My Apps' in the left side bar, then click edit settings on your Live Chat widget. You can change where your chats are routed to, change the tab color, add AI to your live chat, or set up 3rd party integrations.
You also have access to Live Chat reports and integrations you can set up here to send transcripts and leads to your CRM, marketing, or ticketing systems.
3. Preview your Live Chat Widget
Now that your Live Chat app is added to Google Chat, you can test it right away using the Preview Chat url. You can access this link as well as other options by starting to type /livechat. You'll see a list of slash commands. Just choose the /livechat_preview command.
We'll send you your preview link that includes a preview chat widget as well as the code snippet to include on your website.
Once you select your preview link, you'll see your current chat widget and what it will look like on your website. You can customize this chat widget in your chat settings.
When you click start chat, a live chat request will be sent into your Google space with the visitor info.
You have 2 options for joining the chat, Join Chat, and Join as DM. We'll explain these below.
Join Chat in new thread inside of Google Chat Space
Click the Join Chat button to join the chat in this space as a new thread. We'll create a new thread for each live chat session so you can manage multiple chats at once.
To respond to the visitor simply click into the thread, then mention @Live Chat at the beginning of each response to send the message back to the website visitor. Your visitor will see your messages right in your chat widget on your website.
To end the chat from Google Chat, just type the slash command /livechat_end in the thread where you have an active chat.
Join as DM
You can optionally join the chat as a direct message and move the chat over to your DMs. In this case you, you don't need to mention the @Live Chat bot in each response, but you will only be able to chat with one website visitor at a time since this method is in a single thread (your direct messages).
Make sure to add Live Chat to your chat area if you want to chat directly with Live Chat versus within a space. To add Live Chat to your DM's, just click on Chat in the left side bar, type New chat, then Find Apps and search on 'Live Chat'.
4. Embed your Live Chat for Google Chat in your website
Finally, you can enable your Live Chat widget on your website by embedding the code snippet for your live chat right into your website template or theme.
You can access your code form the My Apps section in Social Intents, or by sending the slash command /livechat_code right within Google Chat.
Simply copy and paste this code snippet before the closing </body> tag within your website template.