Apps and Integrations

By Sojan and 1 other

• 7 articles

How to bring your Dialogflow chatbot to Chatwoot?

Chatbots are valuable for many customer engagement teams. They efficiently handle trivial questions and free human agents to focus on more pressing issues. Dialogflow and Rasa.ai are leading NLP (Natural Language Processing) platforms for building customized chatbots. In this guide, we explain how you can create a bot in Dialogflow and easily integrate it with Chatwoot in seconds. How to create a Dialogflow bot? Step 1. Go to your Dialogflow Console. We will be using Dialogflow Essentials for this article. Click on "Create Agent". You will see options like these: Step 2. You will need to create intents based on how you want your bot to respond. There will be 2 default intents in the project called "Default Fallback Intent" and "Default Welcome Intent", as shown below. This completes the basic bot configuration. Let us create a service account and connect it with Chatwoot. You can also create additional intents for your specific use cases. Chatwoot also supports advanced intents that enables agent handoff, interactive messages, etc. refer: Scroll down to "Advanced Intents". Step 3. Create a service account. To connect this bot with Chatwoot, you need to create a service account on your Google Cloud console. Navigate to the project console in Google cloud by clicking on the Project ID in the project settings. Navigate to IAM & Admin -> Service Accounts. You will see a view like the one shown below. Click on "Create Service Account". Provide a Service Account name and description as shown below. To provide access, select Dialogflow API Client from the dropdown. Continue and click on "Done". Now, you would be able to see the service listed in the dashboard. The next step is to create a key so that it can be shared with Chatwoot. Click on the service account and click on the "Keys" tab. Then, click on "Add Key". You will be able to see a screen like the one below. Click on "JSON" and click on "Create". It will generate a key for your service account. Download the key and save it for use later. Setting up Dialogflow Integration in Chatwoot Chatwoot has a native Dialogflow integration. You can connect your bot with Chatwoot in two quick steps. Step 1. Go to "Settings -> Applications -> Dialogflow". Click on "Configure". Step 2. Click the "Add a new hook" button. it will open up a setup modal. You need to add "Project ID," "Project Key file," and an inbox to create a hook. Copy the contents of the key file downloaded earlier and paste it into the text area. That's it! The integration is complete. Test out the website inbox to see if the bot handles the initial query. Advanced Intents Creating a handoff intent Once the user requests to talk to the agent, Dialogflow must inform Chatwoot that an agent can take over the conversation. Create an intent named "Handoff Intent" with training phrases like "Talk to an agent" or "Speak with an agent," etc. To handle the handoff intent, we will create a "Custom Payload" response, as shown below. { "action": "handoff" } Upon triggering an intent with the above payload, Chatwoot will toggle the status of the conversation to open and hand it off to an agent. Interactive Messages Note: Interactive messages are supported only in the website inbox currently. Chatwoot-Dialogflow integration also supports interactive messages. The following types of interactive messages are supported. 1. Options (follow-up supported) 2. Cards 3. Articles Creating an interactive message Intent You can create other interactive messages by changing the payload as mentioned in the interactive messages guide. Create an intent with required training phrases and a "Custom Payload" response, as shown below for an options message. ## example for an options interactive message { "content_type": "input_select", "content": "Select your favorite food from below", "content_attributes": { "items": [ { "value": "I like sushi", "title": "Sushi" }, { "title": "Biryani", "value": "I like biryani" }, { "title": "Pizza", "value": "I like pizza" } ] }, "private": false } When a user interacts with input messages and selects a value, it returns to Dialogflow. This allows for configuring follow-up intents, such as creating an intent with the training phrase "I like biryani" for cases where the contact selects the "biryani" option. How can an agent transfer the conversation back to Dialogflow bot? When the Dialogflow bot is connected to an inbox, conversations are created with pending status instead of open. This lets the initial triaging happen via the bot before the conversation is passed on to an agent. When handoff happens, the conversation status is changed to open and the bot stops responding to it. Sometimes the agents would want to push back a conversation that was handed off, back again into the bot queue. They can do this by changing the conversation status back to pending. This will make the bot start responding to that conversation again.

Last updated on May 15, 2023

How to use webhooks?

Webhooks are HTTP callbacks that are set up for each account. These are triggered when actions such as creating a message occur in Chatwoot. Multiple webhooks can be created for a single account. How to add a webhook? Step 1. Go to Settings → Integrations → Webhooks. Click on the "Configure" button. Step 2. Click on the "Add new webhook" button. A modal will open up. Here, input the URL to which the POST request should be sent. Next, you need to select the events you want to subscribe. This option would allow you to only listen to the relevant events in Chatwoot. Chatwoot will send a POST request with the following payload to the configured URLs for various updates in your account. A sample webhook payload { "event": "message_created", // The name of the event "id": "1", // Message ID "content": "Hi", // Content of the message "created_at": "2020-03-03 13:05:57 UTC", // Time at which the message was sent "message_type": "incoming", // This will have a type incoming, outgoing or template. The user from the widget sends incoming messages, and the agent sends outgoing messages to the user. "content_type": "enum", // This is an enum, it can be input_select, cards, form or text. The message_type will be template if content_type is one og these. Default value is text "content_attributes": {} // This will an object, different values are defined below "source_id": "", // This would the external id if the inbox is a Twitter or Facebook integration. "sender": { // This would provide the details of the agent who sent this message "id": "1", "name": "Agent", "email": "agent@example.com" }, "contact": { // This would provide the details of the user who sent this message "id": "1", "name": "contact-name" }, "conversation": { // This would provide the details of the conversation "display_id": "1", // This is the ID of the conversation which you can see in the dashboard. "additional_attributes": { "browser": { "device_name": "Macbook", "browser_name": "Chrome", "platform_name": "Macintosh", "browser_version": "80.0.3987.122", "platform_version": "10.15.2" }, "referer": "<http://www.chatwoot.com>", "initiated_at": "Tue Mar 03 2020 18:37:38 GMT-0700 (Mountain Standard Time)" } }, "account": { // This would provide the details of the account "id": "1", "name": "Chatwoot", } } Supported webhook events in Chatwoot Chatwoot publishes various events to the configured webhook endpoints. If you want to configure a webhook, refer to the guide here. Each event has its payload structure based on the type of model they are acting on. The following section describes the main objects we use in Chatwoot and their attributes. Objects An event payload may include any of the following objects. The various types of objects supported by Chatwoot are listed below. Account { "id": "integer", "name": "string" } Inbox { "id": "integer", "name": "string" } Contact { "id": "integer", "name": "string", "avatar": "string", "type": "contact", "account": { // <...Account Object> } } User { "id": "integer", "name": "string", "email": "string", "type": "user" } Conversation { "additional_attributes": { "browser": { "device_name": "string", "browser_name": "string", "platform_name": "string", "browser_version": "string", "platform_version": "string" }, "referer": "string", "initiated_at": { "timestamp": "iso-datetime" } }, "can_reply": "boolean", "channel": "string", "id": "integer", "inbox_id": "integer", "contact_inbox": { "id": "integer", "contact_id": "integer", "inbox_id": "integer", "source_id": "string", "created_at": "datetime", "updated_at": "datetime", "hmac_verified": "boolean" }, "messages": ["Array of message objects"], "meta": { "sender": { // Contact Object }, "assignee": { // User Object } }, "status": "string", "unread_count": "integer", "agent_last_seen_at": "unix-timestamp", "contact_last_seen_at": "unix-timestamp", "timestamp": "unix-timestamp", "account_id": "integer" } Message { "id": "integer", "content": "string", "message_type": "integer", "created_at": "unix-timestamp", "private": "boolean", "source_id": "string / null", "content_type": "string", "content_attributes": "object", "sender": { "type": "string - contact/user" // User or Contact Object }, "account": { // Account Object }, "conversation": { // Conversation Object }, "inbox": { // Inbox Object } } A sample webhook payload { "event": "event_name" // Attributes related to the event } Webhook Events Chatwoot supports the following webhook events. You can subscribe to them while configuring a webhook in the dashboard or using the API. conversation_created This event will be triggered when a new conversation is created in the account. The payload for the event is as follows. { "event": "conversation_created" // <...Conversation Attributes> } conversation_updated This event will be triggered when there is a change in any of the attributes in the conversation. { "event": "conversation_updated", "changed_attributes": [ { "<attribute_name>": { "current_value": "", "previous_value": "" } } ] // <...Conversation Attributes> } conversation_status_changed This event will be triggered when the status of the conversation is changed. Note: If you are using agent bot APIs instead of webhooks, this event is not supported yet. { "event": "conversation_status_changed" // <...Conversation Attributes> } message_created This event will be triggered when a message is created in a conversation. The payload for the event is as follows. { "event": "message_created" // <...Message Attributes> } message_updated This event will be triggered when a message is updated in a conversation. The payload for the event is as follows. { "event": "message_updated" // <...Message Attributes> } webwidget_triggered This event will be triggered when the end user opens the live-chat widget. { "id": , "contact": { // <...Contact Object> }, "inbox": { // <...Inbox Object> }, "account": { // <...Account Object> }, "current_conversation": { // <...Conversation Object> }, "source_id": "string", "event": "webwidget_triggered", "event_info": { "initiated_at": { "timestamp": "date-string" }, "referer": "string", "widget_language": "string", "browser_language": "string", "browser": { "browser_name": "string", "browser_version": "string", "device_name": "string", "platform_name": "string", "platform_version": "string" } } }

Last updated on May 15, 2023

How to answer conversations from Slack?

If your company/account/project uses Slack as a communication medium, you can integrate Slack with Chatwoot to manage all the inbox conversations in your slack workspace. To start the quick setup, follow the steps explained below. If you are using a self-hosted Chatwoot instance, please follow this guide. How to integrate Slack with Chatwoot? Step 1. Go to Settings -> Integrations -> Slack -> Connect. Step 2. Enter your Slack workspace URL as prompted. Step 3. Review the permissions and allow the Chatwoot app to access your Slack workspace. Step 4. You will be redirected to the setup screen, where you will be able to see a list of your Slack channels (public and private). You need to select a channel of your choice from the dropdown menu where you want to receive your Chatwoot conversations. Click the Update button. Now, the integration is complete. Important note If you have connected Slack before September 2023, you would not have had the option of selecting a specific Slack channel to manage your conversations from. If you would like to change that and select a specific channel of your choice, you will need to delete your existing Slack integration from the Chatwoot app and connect it again. FAQ Q. I am replying to a message, but it's not showing up in the Chatwoot inbox. A: When you reply to the message, reply under the same thread. Each thread represents a separate conversation, so to show your reply to the same message, you should reply under the thread. We use thread ID to verify the separate conversation. Supported features Answer from your agent profile When you reply to a conversation from Slack, the customer receives the reply from your Agent profile in Chatwoot. Create private notes from Slack You can create a private note in Chatwoot from Slack. If you prefix a message with "note:", it converts into a private note and notifies any tagged agents. Here is an example:

Last updated on Apr 10, 2024

How to use Dashboard Apps?

With Dashboard apps, you can integrate an app within the Chatwoot dashboard for agents' use. This feature enables you to create an application independently, which can then be embedded to provide customers' information, orders, past payment history, etc. When embedded in Chatwoot's dashboard, your application will get the context of the conversation and contact as a window event. Implement a listener for the message event on your page to receive the context. P.S. Check out our YouTube live on building a Dashboard App. How to create a dashboard app? Step 1. Go to Settings → Integrations → Dashboard apps. Click on the “Configure” button corresponding to the Dashboard Apps. Step 2. Add your app name and the URL on which your app is hosted. Once you are done, a new tab with the name you gave to the app will appear in the conversation window. In this case, it is “Customer Orders”. When you click on the new tab, you will be able to see your application fetching data on the Chatwoot dashboard. Receiving data from Chatwoot into your app Chatwoot will deliver the conversation and contact context as a window event. This can be accessed within your app by implementing a listener for the event, as shown here: window.addEventListener("message", function (event) { if (!isJSONValid(event.data)) { return; } const eventData = JSON.parse(event.data); }); On-demand request for data from Chatwoot If you need to request the conversation data on demand from Chatwoot, you can send a message to the parent window using the javascript postMessage API. Chatwoot will be listening to this key: chatwoot-dashboard-app:fetch-info. Example The following code can be used to query the dashboard app. Chatwoot will respond to this request by providing the updated conversation payload promptly. window.parent.postMessage('chatwoot-dashboard-app:fetch-info', '*') // You would get a message in the on message listener with the appContext payload. Event Payload conversation object { "meta": { "sender": { "additional_attributes": { "description": "string", "company_name": "string", "social_profiles": { "github": "string", "twitter": "string", "facebook": "string", "linkedin": "string" } }, "availability_status": "string", "email": "string", "id": "integer", "name": "string", "phone_number": "string", "identifier": "string", "thumbnail": "string", "custom_attributes": "object", "last_activity_at": "integer" }, "channel": "string", "assignee": { "id": "integer", "account_id": "integer", "availability_status": "string", "auto_offline": "boolean", "confirmed": "boolean", "email": "string", "available_name": "string", "name": "string", "role": "string", "thumbnail": "string" }, "hmac_verified": "boolean" }, "id": "integer", "messages": [ { "id": "integer", "content": "Hello", "inbox_id": "integer", "conversation_id": "integer", "message_type": "integer", "content_type": "string", "content_attributes": {}, "created_at": "integer", "private": "boolean", "source_id": "string", "sender": { "additional_attributes": { "description": "string", "company_name": "string", "social_profiles": { "github": "string", "twitter": "string", "facebook": "string", "linkedin": "string" } }, "custom_attributes": "object", "email": "string", "id": "integer", "identifier": "string", "name": "string", "phone_number": "string", "thumbnail": "string", "type": "string" } } ], "account_id": "integer", "additional_attributes": { "browser": { "device_name": "string", "browser_name": "string", "platform_name": "string", "browser_version": "string", "platform_version": "string" }, "referer": "string", "initiated_at": { "timestamp": "string" } }, "agent_last_seen_at": "integer", "assignee_last_seen_at": "integer", "can_reply": "boolean", "contact_last_seen_at": "integer", "custom_attributes": "object", "inbox_id": "integer", "labels": "array", "muted": "boolean", "snoozed_until": null, "status": "string", "timestamp": "integer", "unread_count": "integer", "allMessagesLoaded": "boolean", "dataFetched": "boolean" } contact object { "additional_attributes": { "description": "string", "company_name": "string", "social_profiles": { "github": "string", "twitter": "string", "facebook": "string", "linkedin": "string" } }, "availability_status": "string", "email": "string", "id": "integer", "name": "string", "phone_number": "+91 9000000001", "identifier": "string || null", "thumbnail": "+91 9000000001", "custom_attributes": {}, "last_activity_at": "integer" } currentAgent object { "email": "string", "id": "integer", "name": "string" } Final Payload { "event": "appContext", "data": { "conversation": { // <...Conversation Attributes> }, "contact": { // <...Contact Attributes> }, "currentAgent": { // <...Current agent Attributes> } } }

Last updated on Apr 10, 2024

How to enable video calls with Dyte integration?

Video calling your customers is a great way to connect with them quickly, understand their problems effectively, provide faster resolutions, and gain valuable business insights. You can video call your customers through website live chat in Chatwoot. To utilize this feature, you will need to enable the Dyte integration. This guide explains how. P.S. If you don't have a Dyte account, you'll need to create one first. How to set up the Dyte integration in Chatwoot? Step 1. Go to Settings -> Applications -> Dyte. Click the corresponding "Configure" button. Step 2. You'll see the Dyte app page. Click the "Connect" button. Step 3. Enter your Organization ID and API Key from Dyte. How to find your Dyte configuration values? To find these values, visit the "API Keys" section on your Dyte developer portal. In Chatwoot, once you have entered the values, click the "Create" button. Now, your Dyte integration is complete. How to video call your customers in Chatwoot? Once the Dyte integration is enabled, you'll be able to see the video calling option on the website inbox chat window. To invite your customer for a video call, follow the steps described below. Step 1. Click the video camera icon beneath the text editor. Step 2. Chatwoot will send a message with an invitation to your customer to join the video call. Click the button "Click here to join" to join the room. Step 3. Now you will be connected to your customer. The video calling interface gives plenty of options to make your and the customer's experience more enriching. Some of these options are shown in the screenshot below:

Last updated on Apr 10, 2024

How to translate messages with Google Translate?

If you frequently receive queries in languages you/your team members don't understand, you can utilize the Google Translate integration in Chatwoot. When enabled, you can instantly translate incoming messages using the right-click menu. This way, you can easily communicate with customers in their native language, even if you don't speak it yourself. How to enable Google Translate in Chatwoot? Step 1. Go to Settings -> Applications -> Google Translate. Click the corresponding "Configure" button. Step 2. You'll see the Google Translate app page. Click the "Connect" button. Step 3. Enter your Google Cloud Project ID and Project Key File. If you need help obtaining these values, refer to this doc from Google. Once you have entered the values, click the "Create" button. Now, your Google Translate integration is complete. How to change the translation language? Your messages get translated into your site language. To select your site language, visit the "Account Settings" page. Step 1. Go to Settings -> Account Settings -> Site Language. Open the dropdown and select your preferred language. Step 2. Click the "Update Settings" button on the top-right corner of the page. This will translate your entire dashboard to the selected language. Note: Agents can select their individual preferred languages too. How to translate incoming messages? Whenever you receive a message in a language you need help with, click the 3 dots beside the message to open the menu and select "Translate". Find the translated content in the popup window.

Last updated on Apr 10, 2024

How to enhance conversations with OpenAI integration?

Engaging with customers demands tireless professionalism. How well you communicate with your customers is usually a huge contributing factor to sales as well as customer retention. Not to mention the effects on brand identity. But, in order to always sound perfect––you've got to be a robot. So we brought AI to your dashboard instead. With our OpenAI integration, you can improve your customer conversations as they happen. By integrating AI into your Chatwoot dashboard, you can improve your customer conversations in real-time without sacrificing your unique voice or brand identity. You'll receive AI-powered suggestions that help you refine your messages and communicate more effectively with your customers. Setting up the integration takes less than a minute, and the benefits are immediate. To get started, follow the steps below. How to integrate OpenAI with Chatwoot? Step 1. Go to Settings → Applications → OpenAI. Click the corresponding “Configure” button. Step 2. Click the "Connect" button. A modal will pop up, asking for your OpenAI API key. To get your OpenAI API key, log in to your OpenAI account and visit this link. Once you enter your secret API key, you'll see a success message on the screen. How to use the AI features in Chatwoot? There are three AI-powered features in Chatwoot. The sections below explain how to use them. Reply suggestion with AI The “Reply suggestion with AI” feature suggests a possible reply to a message from a customer, helping with fast responses. Follow the steps below to use this feature. Step 1. Go to your Conversations tab from the sidebar and open a conversation that needs a reply. You should be able to see a new option called "Reply suggestion with AI." Here's an example: Step 2. Click the button to see the suggestion. The reply box will be populated with the suggested response. Step 3. Edit your message as you please, and hit the Send button! Improve with AI The “Improve with AI” feature suggests improvements to your message drafts as you compose them. Follow the steps below to use this feature. Step 1. Go to your Conversations tab from the sidebar and open a conversation. Start typing a message in the text box. As you write it, you should be able to see a new option pop up called "Improve with AI." Here's an example: Step 2. Click the "Improve with AI" button to see your options. Select a tone for your message – professional or friendly. Click the "Generate" button. Based on your tone selection, the AI will rewrite your message and instantly populate the text box with the new message. Continuing the example, this is what it would look like: Step 3. Edit your message as you please, and hit the Send button! Summary with AI The “Summary with AI” feature summarizes conversations in Private Notes within seconds. Follow the steps below to use this feature. Step 1. Go to your Conversations tab from the sidebar and open a conversation. Switch to the “Private Note” tab. You should be able to see a new option called "Summary with AI." Here's an example: Step 2. Click the button. The text editor will be populated with a summary of the conversation. Step 3. Edit your note as you please, and hit the ‘Add Note’ button! How to use AI Assist? You can toggle the AI assist by either selecting it from the command bar or clicking the AI Assist button inside the editor. To select a desired feature, simply click on it. Once you have clicked on an option, the Reply Suggestion with AI modal will open, displaying AI-generated content. To insert the content into the editor, click on the Use this suggestion button. FAQs Are AI Assist results always accurate? The results may not always be accurate. While the AI Assist is designed to provide accurate suggestions, it is important for agents to review and verify the suggestions before sending them to customers. Additionally, we are continuously working on improving our AI Assist. Do you support any AI providers other than OpenAI At the moment, we support only OpenAI. But we are planning to add more providers soon.

Last updated on Apr 10, 2024