Create and Configure Sidekick

Create Sidekick to embed on your website and allow your site visitors to chat with your Agents. You can also encourage self-service by activating Quick Actions on Sidekick and surfacing your most frequently asked questions and allowing visitors to search your Public Answers.

Before you start

Before you create Sidekick, we recommend you first review the following:

• Get to know what Sidekick is.
• You can create multiple Sidekicks to embed on different websites or web pages where you want your Customers to access your FAQs or your chat feature. Use Display Rules to control how Sidekick appears on websites/pages.
• The minimized style of the Sidekick icon is customizable if you choose not to use the UI defaults.
• If Sidekick is used with Proactive Chat, note that a Proactive Chat Campaign can override the Sidekick Display Rules so Proactive Chat Campaigns may appear on webpages Sidekick is not supposed to.
• Look into using Quick Reply if you want to give Customers specific options — by way of buttons — to select what they need help with. If using Self-Service Threads, you can link a Quick Reply button to a Thread on the Sidekick configuration page.

Create Sidekick for web

1. Click the menu icon on the top left corner of the screen.
2. Click Settings.
3. Under the Channels category, click Sidekick. The Sidekick page will show you a list of Sidekicks you currently have.
   
4. Click Create Sidekick.
5. From the New Sidekick prompt, enter the name of your new Sidekick. You'll see <domainname.com-> prepended. Enter the name of your new Sidekick after the "–." The name you use should help you identify how or where the Sidekick is being used. For example, gladly.com.com-retale.
   • Special characters are not supported and do not add space between characters.
   • This is the same name that identifies the Sidekick on the Entry Points page.
6. Click Create. This will immediately take you to the configuration page.

Configure and style Sidekick

The Sidekick configuration page is where you'll set how Sidekick looks and how it behaves.

There are three sections that you will need to configure. Each section controls a particular aspect of Sidekick:

1. Configuration– Administrative actions such as when to display Sidekick, what Quick Actions will be used, office hours to control the availability of Sidekick during business hours, and others.
2. Style– Configure the look and feel of Sidekick where you can change things like border style, radius, color, and other design elements.
3. Text– Customize the text that will show up on Sidekick, including the header, input buttons, and more.

Configuration

• Enable Sidekick for 3rd Party Automation Services – If checked, this allows third-party automation partners (like Thankful) to create automation flows in Sidekick and initially send chat requests to an automation partner instead of an Inbox. If activating, click Yes, proceed on the confirmation modal.
  • Note – The third-party automation provider is responsible for coordinating the handoff to Gladly using the Automation API if their automation cannot solve an issue. Unless you're working with an automation partner, leave this box unchecked.
• Enable Search and Quick Actions – If checked, Customers can search Public Answers, view Quick Actions, and see your chat option. If the box is unchecked, Customers can only chat during operating hours or if the day is not marked as Closed in the Office Hours settings. Otherwise, Customers will see the Office Hours & Throttle Message text.
  
  • Note – This box must be checked to allow the use of Audiences and to select the language used to search Answers through Sidekick.
• Display Rules – Option to allow Sidekick to appear on all web pages or no pages.
  • If Display Sidekick on = All Pages, Sidekick appears on all web pages unless an exception is added. It's important to note that a Proactive Chat Campaign can override the Display Rules.
    • If adding an Exception, When a page = Contains, Exact, or Regex, enter the URL parameter to match the Condition. 

      Condition	Description
      Contains	The URL can match and does not have to be the only URL. For example, the URL "/mens/sneakers" appears in the URL " retale.com/pages/shoes/mens/sneakers" would be matched using Any. For the word "sneak," the word "sneakers'" will be matched by also using Any.
      Exact	The URL you're using must match exactly. For example, the URL " /mens/sneakers" would not match the content " retale.com/pages/shoes/mens/sneakers" using Only because the text strings don't precisely match.
      Regex	Short for Regular Expression, a form of light coding which lets you match patterns in the text without specifying the entire string. This is particularly useful to distinguish URLs that can be part of other URL strings or match phrases with variable text. For example, by using Regex, "/pages*" would be matched to " retale.com/pages/shoes/mens/sneakers," " retale.com/pages/shoes/womens/sneakers," and " retale.com/pages/shoes/kids/sneakers." Regex matching follows Google's re2 library.

    • If Display Sidekick on = No Pages, Sidekick will not appear on any webpage unless:
      • A Proactive Chat Campaign is triggered, which overrides the Display Rules.
      • Exceptions can still be added so you can still display Sidekick on specific web pages but hide it everywhere else.
• Office Hours – Schedule office hours of when Sidekick will be live on your site. Please select the correct time zone. (Gladly Recommendation - Provide an alternate way for Customers to contact you during non-business hours.)
  • Timezone – Select the timezone Sidekick should follow.
  • Hours – Enter the hours when Sidekick will be active on your website. If you are closed on a particular day, check the Closed checkbox.
  • Add Time Range – Click this option to enter different time ranges you want Sidekick available. For example, if your team works from 6 AM to 6 PM, but you wish to hide Sidekick from your website to stop chat requests from 12 PM to 1 PM during your team’s lunch hour, this is possible with the time range setting.
    • If "Enable Search and Quick Actions" box is checked, your FAQs will remain accessible, but chat will show your "chat is unavailable" message if outside office hours.
    • If "Enable Search and Quick Actions" box is not checked, and if a day is marked Closed or is outside office hours, the Office Hours & Throttle Message text will appear for Customers attempting to chat in since Agents are not working.
• Quick Actions¹ – This section only appears if "Enable Search and Quick Actions" box is checked. Quick Actions consist of four required Actions that appear on Sidekick. Think of Quick Actions like a "category" or "topic" that point to an external link or Public Answer. 
  • Language¹ – Select the language the Help Center will use to search Public Answers.
  • Audience¹ – Select the audience Sidekick will use to search Public Answers. Selecting "none" allows the searching of all Public Answers not linked to an Audience.
  • Quick Action Configuration (Four required actions)
    • [A] Name – Enter a name for each action.
    • [B] Answer/Website URL – Select whether each action will point to a Public Answer to an external URL/webpage.
    • [C] Answer or Website URL Value – Insert the value based on [B] selection. (Answer/Website URL).
      • Answer – If an Answer is selected on [B], select the Public Answer from the list. Note that if an Audience is selected, only Answers linked to the selected Audience is available.
      • Website URL – If Website URL is selected on [B], enter the URL of the page you want to redirect Customers to.
    • [D] View Answer – If [B] shows Answer, click View Answer to view the Answer on the Answers admin page.
• Icons – Option to display an icon or button (with text) when Sidekick is minimized.
  • Icon – Uses an icon to display Sidekick on a webpage.
  • Text – Uses a button to display Sidekick on a webpage. If selected, enter the text you want to show on the button.
    • Note – Regardless of your selection — Icon or Text — after a Customer starts a chat or clicks on a Quick Action, the icon becomes the default state when Sidekick is minimized. To override this behavior is to create a custom minimized button on your website, which would require some front-end site resources for HTML & CSS styling.
• Close Button – Choose if you want the close button to be signified by an "X" or a "Dash." 
  • This setting also applies to Proactive Chat. The close icon will appear when the visitor hovers over the greeting.

Style

• Placement – Choose a left or right placement where Sidekick appears on your website.
• Z-Index – Adjusts the stack order of elements (positioning of the Sidekick icon on the page) which applies when Sidekick is minimized. Start with "147483000" and adjust as needed.
• Powered By Gladly – Choose to allow the "Powered by Gladly" text to appear on Sidekick.
  • This setting is activated by default. (the box is checked)
  • When clicked, the user is taken to gladly.com.
• Privacy Policy Disclaimer – Display your Privacy Policy statement that Customers accept when starting a chat session.
  • This setting is deactivated by default (the box is not checked). 
  • Check the box to activate the setting and enter your Privacy Policy statement. For example, "By using chat, you accept our <company name> Privacy Policy." Keep the disclaimer concise and within the 140-character limit.
  • Link back to your company's Privacy Policy page by highlighting the text and inserting the link.
    
• Drop Shadow – Choose to use (On) or not use (Off) drop shadows around Sidekick.
• Border Width – Choose Sidekick's border width (1px to 3px).
• Border Color – If you have a border width selected, enter a hex color code to change the border color. 
  • This option is hidden if Border Width shows None.
• Border Radius – Choose Sidekick's border radius (none, small, large).
• Colors – Select the color elements of Sidekick to match your company brand/style.
  • Agents Chat Bubble – Enter the hex color code for the color you want to indicate the Agents' replies.
  • Consumer Chat Bubble – Enter the hex color code for the color you want to indicate your Customers' replies.
• Help App Chat Launcher – Enter the hex color code for the color you want to indicate your chat launcher.
• Alert Color – Enter the hex color code for the color you want to indicate when a live chat is minimized.
• Minimized Chat Icon Color – Enter the hex color code for the color you want to use when the icon is minimized.
• Submit Arrow Color – Enter the hex color code for the color you want to use for the submit arrow icon.

Text

• Fonts 1 and 2 – Enter the font you want to use. This should be the same font used in the CSS for your website. (e.g., Brandon Text, Avenir Next, etc.)
  • Font 1 – Applied to the header text and the chat launcher button.
  • Font 2 – Applied to the Quick Actions, Quick Reply, order status, chat bubble, and input texts.
• Office Hours & Throttle Message – Enter the message you want to display outside office hours or when chat is unavailable. The message can be written in plain text or styled using HTML. You can also embed a web form.
• Labels³ – Configure the labels in Sidekick
  • Activate Chat Header – Enter the title text that appears on top of the Sidekick window when Customers begin chatting. 
  • Chat Input Placeholder – Enter a sample hint text in the chat box. For example, "Enter a message."
• Self-Service Sidekick¹ – Configure Sidekick's self-service screen.
  • Header – Enter the text you want to appear on the top part of Sidekick.
  • Back Button – Enter the text you want to use to signify a "back" action.
  • Active Chat Header – Enter the header text you want to use during a live chat.
  • Chat Input Button – Enter the text to use to start a chat.
  • Chat Input When Button Is Unavailable – Enter a text to use when chat is not available.
  • Chat Input Placeholder – Enter a help text for the chat field.
• Greeting – Configure the messages that Customers see before they start chatting with an Agent. (Glady Recommendation – Think about including a text which states that emails are used for communication purposes only and not for marketing purposes.)
  • Onboarding – If activated, you can collect the Customer's name and email address before a chat session starts. This information is used to locate an existing Profile and any past Conversations.
    • Note – Onboarding must be activated to use Self-Service Threads.
  • Prompt Order – If Onboarding is activated, select the order you want identifying information to be presented to Customers. (e.g., NAME > EMAIL, or EMAIL > NAME.) This information is used to identify and locate the Customer Profile (if they're an existing Customer) or create a new Customer Profile with the name and email address.
    • ("Onboarding" box is checked)
      • First Message – Enter a greeting that also asks for their email address. For example, "Thank you for contacting us. What's your email? We'll use your email to find your profile and any past conversations you've had with us — not to spam you." This helps identify the Customer in Gladly and pull up their Profile if they are an existing Customer.
      • Second Message – Enter a message that also asks for the name. For example, "Thanks! Can we get your name?" This information is also passed to the Customer Profile.
      • Third Message – Enter a message asking how you can help them. For example, "Thanks <CUSTOMERNAME>! How can we help?" <CUSTOMERNAME> variable automatically inserts the Customer name.
        • If using Proactive Chat and onboarding is activated for a Campaign, the Third Message is replaced by the Campaign's Action greeting.
      • How Would You Like the Customer to Reply? – Customers can either reply to the Third Message by typing a message (Type A Message) or selecting a reply by clicking buttons (Quick Reply Button).
        
        • If Type A Message is selected, Customers type a string of text to reply to the Third Message with a question like "How we can help?" The Customer's reply is taken verbatim and is what the Agent sees when the Customer is routed.
        • If Select a Quick Reply Button is selected, you can configure specific options by way of buttons as input to reply to the Third Message.
          
          • Button Label – Enter the button label with text (e.g., Refunds) that represents an option.
          • Button ID –  Used to identify the button via API or by an automation partner. It can be alphanumeric or text, or numbers. We suggest using an ID that makes the button easily identifiable.
          • Threads² –  Shows a list of automation Threads available for use. Select the Thread you want to trigger when the button is clicked.
            • Note –Onboarding must be selected to use Threads.
            • Select No Threads Assigned if you're not linking the button to a Thread.
          • + Add Button – Click to add more buttons as a Quick Reply.
      • Fourth Message – You have the option to activate/deactivate a message to let a Customer know you have the information you need to start helping them once their request is routed to an Agent upon typing a message or clicking a button. For example, "Got it! Someone will be with you shortly."
        • If the box is unchecked, no additional message is sent to the Customer after they reply to the Third Message and until the request the routed to an Agent and they send a response.
        • If using Proactive Chat and if onboarding is activated for a Campaign, depending on how generic the Campaign's greeting is, the Fourth Message may be redundant. 
    • ("Onboarding" box is unchecked)
      • First Message – Enter a greeting. Something like "Thank you for contacting us. How can we help you?" This allows you to greet the Customer without asking for their name and email address in the beginning. Keep in mind that you'll still need a Customer's email address to find their Profile in Gladly.
      • How Would You Like the Customer to Reply? – Customers can either reply to the Third Message by typing a message (Type A Message) or selecting a reply by clicking buttons (Quick Reply Button).
        
        • If Type A Message is selected, Customers type a string of text to reply to the Third Message with a question like "How we can help?" The Customer's reply is taken verbatim and is what the Agent sees when the Customer is routed.
        • If Quick Reply Button is selected, you can configure specific options by way of buttons as input.
          
          • Button Label – Enter the button label with text (e.g., Refunds) that represents an option.
          • Button ID –  Used to identify the button via API or by an automation partner. It can be alphanumeric, text, or numbers. We suggest using an ID that makes the button easily identifiable.
          • Threads² –  List of automation Threads available for use. Select the Thread you want to trigger when the button is clicked.
            • Note –Onboarding must be selected to use Threads.
            • Select No Threads Assigned if you're not linking the button to a Thread.
          • + Add Button – Add more buttons.
      • Second Message – You have the option to activate/deactivate a message to let a Customer know you have the information you need to start helping them once their request is routed to an Agent upon typing a message or clicking a button. For example, "Got it! Someone will be with you shortly."
        • If Onboarding is activated, you must enter a Second Message.
        • If Onboarding is not activated, you can check/uncheck the Second Message. If selected, enter a message as a response to a reply from the First Message.
• End Chat – Enter the text shown when the chat is ended. 
  • Chat Ended By Agent – Enter the text you want Customers to see when a chat ends.
  • Chat Ended By Expiration – Enter the text you want Customers to see if a chat session times out because the Agent did not reply within 24 hours.
  • Chat Ended By No Reply – Enter the text you want to use if a Customer stops responding.
  • Chat Ended By a New Active Chat – Enter the text you want Customers to see if Sidekick notices a duplicate chat session from the same Customer but on a different device/browser.
• Hover Text – Configure the hover text for specific areas of Sidekick. 
  • Close Button Hover Text –Enter the text you want to use when Customers hover over the close icon.
  • Send Button Hover Text – Enter the text you want to use when Customers hover over the send icon.
  • Minimized Icon Button Hover Text – Enter the text you want to use when Customers hover over the Sidekick icon.
  • Attachment Icon Button Hover Text – Enter the text you want to use when Customers hover over the attachment icon.

Click Save and you'll be taken back to the Sidekick page. It can take up to five minutes for updates to appear.

Next, go to the Entry Points settings page and link Sidekick to an Inbox. This allows you to direct chats from Sidekick to a specific Inbox.

Link Sidekick to an Inbox

1. On the Settings page, under the Orchestration category, click Entry Points.
2. Hover over Chat and click the pencil icon to open the Chat Channel's Entry Point settings.
3. The Inbox selected in the default Inbox field is where all Sidekick chats will be routed. If this is the Inbox you want to use to receive chats from your website where Sidekick is embedded, you can stop here. If you want chats to go to a different Inbox for a particular Sidekick (if you have more than one), you can add an exception.
4. Click + Add exception if the Sidekick in question won't use the Chat Channel's default Inbox or Entry Point SLA.
   • Entry Point – Select the Entry Point you want to exclude from using the chat's default Inbox. This will be the name of the Sidekick you created for the mobile app.
   • Inbox – Select the Inbox you want incoming chat requests from the mobile app to queue in instead of the default Inbox.
   • Entry Point SLA (minutes) – Leave this field blank if you want to use the selected Inbox's SLA. Otherwise, entering an SLA here trumps the Inbox SLA.
     • You can use fractional minutes. For example, 0.66 is 40 seconds.
     • You can't enter "0" or use the "-" (minus) symbol.
5. Click Save.

Preview and embed Sidekick

When you're done configuring Sidekick, you can preview what it looks first like before you embed it on your website. 

1. From the Sidekick page, find the Sidekick you want to preview and click the menu icon to the right of the screen, then click View Preview.
2. You'll see what Sidekick would look like on your website. Check the Desktop or Mobile option to preview Sidekick in those formats.
   • Preview Sidekick with Proactive Chat – If you're using Proactive Chat, check this box to preview what a Campaign would look like to a website visitor.
     
     • In the Proactive Greeting Sample text field, you can enter a sample text which provides a live greeting preview on the chat icon.
     • If the Sidekick icon is missing, see Why is the Sidekick icon missing through the preview feature?.
3. If you're happy with how you configured Sidekick, click Embed this time to see the embed code.
4. You will see two snippets of code appear:
   1. Load Sidekick – Copy and paste this snippet of code into the head of your website where you want to use Sidekick.
   2. Initialize Sidekick – Copy and paste this code on your website to bring up the correct Sidekick configuration. 

Sidekick Updates

Once Sidekick is embedded on your website, you do not need to re-embed the Sidekick code if you make additional changes to your Sidekick configuration (e.g., colors, new text, placement, etc.). Any changes will take ~10 minutes to appear. 

• ¹Appears if Sidekick If "Enable Search and Quick Actions" box is checked.
• ²Appears if Self-Service Thread feature is activated.
• ³Appears if "Enable Search and Quick Actions" is not checked.