Create and Configure Sidekick
  • 12 Oct 2022
  • 16 Minutes To Read
  • PDF

Create and Configure Sidekick

  • PDF

REQUIRED USER ROLE
Administrator

Create Sidekick to allow Customers to chat with your Agents. It also gives Customers the opportunity to self-self first using Public Answers first before chatting in.

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 webpages 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.
Watch Out - We recommend not adding an Entry Point(s) until you're ready to receive incoming requests
Upon adding a new Entry Point, incoming requests from that Entry Point automatically route to the corresponding Channel's primary Inbox. For example, upon adding Instagram Messaging as an Entry Point, direct messages from your Instagram account will automatically create a Conversation in Instagram Channel's primary Inbox.

  • Voice/SMS – Phone numbers can be purchased and held onto until you're ready to complete the setup by connecting them as Entry Points.
  • Chat (Sidekick) – Upon configuring Sidekick, it's available to receive incoming chat requests as soon as it's embedded on your website. Chats are routed to the chat Channel's primary Inbox.
  • Social Channels – Upon adding a social Channel Entry Point (e.g., Twitter, Instagram, or WhatsApp), messages automatically route to the social Channel's primary Inbox.
  • Email – Once an email address is added, it's ready to receive inbound emails in the email Channels' primary Inbox as long as email forwarding is activated.

Use Exceptions to link an Entry Point to a different Inbox if you don't want to use the Channel's primary Inbox.

Create Sidekick

  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.
    • 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 edit Sidekick

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

Tip - Use the UI illustrations
Use the visual illustrations to the right of each option to help you visualize the part of Sidekick you are configuring.

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

  1. ConfigurationAdministrative actions such as when to display Sidekick, what Quick Actions will be used, office hours, and others.
  2. StyleConfigure the look and feel of Sidekick where you can change things like border style, radius, color, and other design elements.
  3. TextCustomize the text that will show up on Sidekick, including the header, input buttons, and more.

1. Configuration

  • Enable Sidekick for Automation – If checked, this allows 3rd party partners like Thankful to create automation flows in Sidekick. Unless you're working with an automation partner, leave this box unchecked.
  • Enable Search and Quick Actions If the box is checked, Customers can search Public Answers, view Quick Actions, and see your chat option. If the box is unchecked, Customers can only chat.
    • 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 webpages 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. 
        ConditionDescription
        ContainsThe 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.
        ExactThe 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.
        RegexShort 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 alternative way for how Customers can 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, the Sidekick icon will be hidden entirely for days marked as Closed or not within the time range as shown in Office Hours.
  • Quick Actions1 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
    • Language1 Select the language the Help Center will use to search Public Answers.
    • Audience1 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.

2. 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 On by default.
    • When clicked, the user is taken to gladly.com.
  • 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 use to show your reply.
    • Consumer Chat Bubble Enter the hex color code for the color you want to show your Customer's reply.
  • 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 icon.

3. Text

  • Sidekick 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.)
  • Office Hours & Throttle Message Enter the message you want to display during 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 text that appears on top when Customers begin chatting. 
    • Chat Input Placeholder – Enter the sample text in the chat box.
  • Self-Service Sidekick1 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 the Customer will 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.
            • Threads2  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.
            • + Add Button – Add more buttons.
        • 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.
            • Threads2  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.
            • + 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 activatedyou can check/uncheck the Second Message. If selectedenter 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 5 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 to a specific Inbox.

  1. On the Settings page, under the Channels category, click Entry Points.
  2. Go to the Chat section.
  3. The Inbox selected in the Primary Inbox field is where all Sidekick chats will route to. If this is correct, you can stop here. If you have multiple Sidekicks and you don't want all chats to use the chat Channel's primary Inbox, proceed to add an exception.
  4. Click + Add exception and configure the following:
    • Entry Point – Select the Entry Point you want to exclude from using the chat's primary Inbox.
    • Inbox – Select the Inbox you want incoming chat requests from Sidekick to queue in instead of using the primary Inbox.
    • 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.
    • Note – Click Revert changes to cancel changes you made without affecting the existing configuration.

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.
  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. 




  • 1Appears if Sidekick If "Enable Search and Quick Actions" box is checked.
  • 2Appears if Self-Service Thread feature is activated.
  • 3Appears if "Enable Search and Quick Actions" is not checked.



Was this article helpful?