Home Apps and Integrations

Apps and Integrations

By Fabio and 1 other

• 4 articles

How to bring your Dialogflow chatbot to Snypto?

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 Snypto 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 Snypto. You can also create additional intents for your specific use cases. Snypto 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 Snypto, 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 Snypto . 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 Snypto Snypto has a native Dialogflow integration. You can connect your bot with Snypto 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 Snypto 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, Snypto 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. Snypto -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 Sep 18, 2024

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 Snypto. 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 Snypto. Snypto 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.snypto.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": "Snypto", } } Supported webhook events in Snypto Snypto 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 Snypto and their attributes. Objects An event payload may include any of the following objects. The various types of objects supported by Snypto 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 Snypto 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 Sep 18, 2024

How to use Dashboard Apps?

With Dashboard apps, you can integrate an app within the Snypto 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 Snypto 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. 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 Snypto dashboard. Receiving data from Snypto into your app Snypto 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 Snypto If you need to request the conversation data on demand from Snypto, you can send a message to the parent window using the javascript postMessage API. Snypto will be listening to this key: Snypto-dashboard-app:fetch-info. Example The following code can be used to query the dashboard app. Snypto will respond to this request by providing the updated conversation payload promptly. window.parent.postMessage('snypto-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 Sep 18, 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 Snypto 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 Snypto? 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 Snypto? There are three AI-powered features in Snypto. 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 Sep 30, 2024