Ada AI Chatbot

Updated 9 hours ago by Chris Lavoie

Ada AI chatbot can be used by non-technical CX teams can power personalized interactions for every customer using Ada’s codeless platform. Launch chat experiences your customers will love in under 30 days, with no dependence on IT.

How it works

You can also avoid WISMO questions, as Ada and Gorgias will provide instant, real-time responses using no-code integrations to your order management system including Shopify, Magento, and more. You can also use Gorgias and Ada to make the first move - reach out to customers on your site proactively with personalized information or offers.

You can also use Ada's AI Chatbot to handoff a customer to a Gorgias live agent when needed. Watch the video below for more details!

 

There are 2 main use cases for this integration: 1) integrating Ada with Gorgias chat & 2) integration Ada with Gorgias ticketing. Both are described separately below

Setup instructions

Using Ada together with Gorgias Chat is a great combination to help your customers self-serve and be seamlessly handed off to your support team when needed.

  1. First, configure your Gorgias Chat integration, using the instructions here (https://docs.gorgias.com/gorgias-chat/chat-getting-started). Copy the Javascript code for installation

  1. Next, embed Ada on your site, by adding the following HTML to the <head> section of your page, replacing <YOUR-BOT-HANDLE> with the handle of your Ada bot.

<script>

window.adaSettings = {

eventCallbacks: {

     "custom_handoff": event => {

 

         //<Gorgias Chat Widget Javascript snippet goes here>

 

         var userEmail = event.user_data.global.email; //This line is optional, and is used to pass a global variable named "email" to Gorgias below

         var gorgiasChatInterval = window.setInterval(function() {

                 if (window.GorgiasChat && GorgiasChat.hasOwnProperty("captureUserEmail")) {

                     window.clearInterval(gorgiasChatInterval); // this line breaks out of the loop - make sure it's not deleted.

                       

                     GorgiasChat.captureUserEmail(userEmail); // this line is optional, and is needed to set the email that we saved from Ada on line 8 in Gorgias Chat

                       

                     GorgiasChat.on('widget:closed', function(data) {

                         adaEmbed.toggle().then(() => {

                             document.querySelector('#gorgias-chat-container').remove();

                         });

                     });

                     GorgiasChat.open();

                 }

         }, 100);

         adaEmbed.toggle();

     }

}

}

</script>

<script

  async

  id="__ada"

  data-handle="<YOUR-BOT-HANDLE>"

  src="https://static.ada.support/embed2.js"

></script>

  1. Then, replace the below comment with your Javascript snippet from step 1

 

 //<Gorgias Chat Widget Javascript snippet goes here>

  1. (Optional) Add this CSS to your page, to align Gorgias’ button with Ada’s

#gorgias-chat-container iframe#chat-button {

height: 64px !important;

width: 64px !important;

margin-bottom: 12px !important;

}

Note: you may need to adjust the height, width, and margin values according to the button size you have configured in Ada

And that's all that’s needed to install Ada! Ada should now be installed on your site and ready to handoff to Gorgias Chat, which you’ll configure in the next section.

Configuring the handoff in Ada

In this section, we’ll configure an answer within Ada to handoff to Gorgias Chat.

To start, navigate to the answer flow in your Ada bot dashboard where you’d like to handoff to Gorgias Chat. Then, add each of the below blocks in the following order to build out this answer.

  1. Add any messages about handing the chatter off to an agent

  1. Add a Request block to retrieve the chatter transcript from Ada and store it in a variable, with the following parameters:

URL

https://<YOUR-BOT-HANDLE>.ada.support/api/chatters/<CHATTER_TOKEN>/js-event-data/, where <YOUR-BOT-HANDLE> is the handle of your Ada bot, and <CHATTER_TOKEN> is the variable that is auto-populated by Ada containing the unique token value of the current chatter

Method

GET

Headers

None

Save as variable

chatter_data.event_data.chatter_transcript

  1. Following the above Request block, add a second Request block to pass the chatter transcript as a ticket in Gorgias, with the following parameters:

  1. Following these two request blocks, add a Custom Handoff block. This will trigger the custom_handoff event that we added the callback for in the embed script. Note that there are no settings to configure for this block within Ada

  1. Add any messages and quick replies welcoming the chatter back, after their session with Gorgias Chat is complete

And that’s it! When a chatter comes to your site, and launches Ada, Ada can now handoff to an agent using Gorgias Chat.

Configuring Gorgias Chat for a more seamless handoff

Here are a couple tips to make the handoff to Gorgias Chat even more seamless. They are not required for handing off to Gorgias, but just make the experience even more slick!

  • We recommend matching your main colour and conversation color in Gorgias Chatt to the colors you’re using in Ada

  • If you currently have self-service enabled for a Shopify store, we recommend turning it off, so chatters are passed directly to the chat within Gorgias. To do this, navigate to https://<YOUR-GORGIAS-DOMAIN>.gorgias.com/app/settings/self-service and disable it

Creating tickets in Gorgias with Ada

Using Ada together with Gorgias is a great way to help your customers get their questions answered through Ada and get support from your team through Gorgias.

Configuring Gorgias ticket creation in Ada

In this section, we’ll configure an answer within Ada to create a ticket in Gorgias.

To start, navigate to the answer flow in your Ada bot dashboard where you’d like to create a ticket. Then, add each of the below blocks in the following order to build out this answer.

  1. Add any messages about creating the support ticket, and if you haven’t done so already, ask the user for ticket details, including their email address, issue description, etc. 

  1. Add a Request block to retrieve the chatter transcript from Ada and store it in a variable, with the following parameters. This transcript will be passed to Gorgias and included in the ticket.

  1. Following the above Request block, add a second Request block to create the ticket in Gorgias, with the following parameters:

  1. Add any messages and quick replies to let them know their ticket has been created and let the continue the conversation with Ada in the meantime

And that’s it! When a chatter needs support from your team, they can launch Ada, and Ada can now create a ticket for them directly in Gorgias.


What do you think? Yay or Nay?