Concierge Editor Reference

Introduction

With Concierge V2, Capacity organizations can now easily and quickly customize web concierges.  There are several exciting options now available, with more to come.  This article will provide information on those customizations, and tips and tricks for maximizing customer engagement.

Cards

There are three types of Concierge cards, arranged in the following way: one optional Livechat Card that offers Concierge users the opportunity to to speak directly with an agent, one optional Banner Card that provides an important message, and any number of Content Cards with text, images, video, and more. 

Beneath all of these cards is a footer that allows the Concierge user to launch into a conversation starting with a welcome message.

Availability Card

If your organization uses Capacity's Livechat product, the Concierge can now helpfully route users directly with a Helpdesk agent, or send them to a Guided Conversation.  To use the card, check the "Enable Card" box.

This opens several checkboxes and fields for you to configure the card.  First, add the UUIDs of the teams that will participate in the Livechats.

There are three more fields that are required:

  • Card Text is the message that offers the Concierge user a chance to chat
  • Start Button Text is the text for the button that kicks off a Livechat
  • Trigger Inquiry is the inquiry that is sent to the bot when the start button is clicked.  This should match the inquiry of a Guided Conversation that has a Livechat card.

Check the Show Even if No Agents are Available box and you'll see these three options again.  This time, you'll want to provide text that gives context to the end user.  For example, the Start Button Text could be "Leave a Message" and Trigger Inquiry could launch into a Guided Conversation that collects information from the concierge user and creates a Helpdesk ticket.

You can use the variable {{agent.name}} as a placeholder for your Livechat agent name, if warranted.

If you want, you can display an estimated wait time, which guesses 2 minutes per queued Livechat user, by checking the box.

Once you've completed the card, all of the items combine to make views like the ones below!

Banner Card

Banners are an easy way to alert users of an important message and link out to a site.   There are three important values to provide, and one that can be safely ignored for most users.

Select one of four Banner Types.  They're identical in form and function except for a color that represents the tone and importance of the message.

  1. Info banners are blue, and are best for providing general information
  2. Success banners are green and intended for a big announcement or accomplishment
  3. Warning banners are yellow, and alert users to an important event or task
  4. Error banners are red and should only be used in emergency situations

In the Banner Message field, enter the text you want to display in the Concierge. 

Additionally, it's not required, but you can provide a URL that the Link To field.  This is where the chat user will be routed when clicking the banner.  It should be a standard web address, starting with http:// or https://.   If this value isn't specified, clicking the banner won't do anything.

Link Target should always be set to "_blank", unless otherwise directed.

Concierge Card

The Concierge card has three different flavors:

  1. The Content Card, which has text, buttons, images, and video
  2. The Helpdesk Card, which allows concierge users to view tickets they've submitted
  3. The HTML Card, which can contain custom content, like social media posts (Note that this may require additional configuration by org admins)

All three cards have the option to be dynamically displayed based off of the URL the Concierge is loaded on. To create a card that will only display based off of the URL, you will need to populate the URL Pattern input at the top of the card. This is what will determine when the card loads. 

URL Pattern: This will default to blank, meaning the Concierge card will display on all pages that the Concierge Bot is displayed. If you would like to customize the Concierge card, then you can enter in a URL path or use regex  to define multiple URLs.

  1. If you define a URL path here, the Concierge card will only show up when it matches the URL path. If you want to put more complex matching criteria, you can use regex  to tell the system when to display the Concierge card. Below are some examples of regular expressions for URL matching.
    1. If you want to match on URLs that contain abc.html or def.html or xyz.html, then the regex to enter would be

      (?:abc\.html|def\.html|xyz\.html)

    2. If you want to match on a URL that does not contain abc.html, then the regex to enter would be

      ^(?!.*(?:abc.html))

    3. If you want to match on URLs that contain state=MO and product=FHA, then the regex to enter would be 

      (state=MO.+product=FHA|product=FHA.+state=MO)

Content Card

The content card is one of three types of concierge card, and the easiest to use.  There are eight types of content that can be added to a content card.  

  1. Title
  2. Image
  3. Label
  4. Header
  5. Description
  6. Button Stack
  7. URL Buttons
  8. Video

You can mix and match types of content in as many content cards as you'd like.  For example, your concierge could have a first card with a Header, Description, and Image, then a second with a Header, Title, Video, and URL Buttons.  Content Cards can be sorted, but the content within them can't be.

Title content is exactly as described: a bolded line of text that works best at the top of a content card.  Titles can be very long, but for maximum effect, keep them short and direct.

Use Image content to help provide a compelling and polished experience to your concierge.  There are two values for images: an Image URL and a Link.  The URL is the full link to your file, and the Link value is an optional parameter that represents the destination for users who click on the image.

Headers and Labels function similarly to Title content, but appear differently in the Content Card.  Headers are slightly larger than the title, and work well as section headings.  Labels are smaller, but capitalized, so best utilized as headings for small blocks of text or images.  Both Header and Label content have just one value to set: the text to display.

Description content typically consists of a block of text.  In contrast to Titles, Headers, and Labels, this is not bolded or capitalized.  Use it for longer messages by entering the text in the box labeled Value.

Button Stacks are exactly what they're called: a block of buttons.  They're powerful when you want to launch the user into a conversation, similar to the buttons (a.k.a. "teaser chips") visible for some concierges prior to opening.  When you add a section of this type, you can add as many buttons as you'd like.

Here's a nice Content Card design combining several forms of content: Title, Image, Header, and a Button Stack.

URL Button content consists of a vertical stack of buttons that link out to web addresses.  If you've add a card section with this type, you'll be prompted to configure one or more buttons.  Each button has display text ("Button Text"), a web address that the button leads to, and a Style.  Available Styles are "Button" (a traditional design, rectangular with a corner radius) and "Link", which appears as a hyperlink (i.e., blue and underlined).  You can safely leave the Target field value as "_blank".

Here's an example of a nicely laid out Content Card with three sections of content: a Header, a Description, and two URL Buttons in the Button style.

Video content is very powerful when securely added to a concierge.  You have two options for adding video content.  

One option is providing code in an iFrame, in the Embedded Video field.  This requires generating and pasting in custom HTML code.  On popular video sites, you can generate the embed code easily.  For example, on Youtube, navigate to a video and click "Share".  In the popup, pick "Embed".

The code shown will look something like this:

<iframe width="560" height="315" src="https://www.youtube.com/embed/OONv6dpHd7U" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Copy this string of characters and paste it into the Embedded Video field, and you should be good to go!  This is an example of how an embedded YouTube video looks in a Content card.


A second option, Adding a Custom Video, contains the following four fields:

  • Video URL is an address for a video.  It must point to an asset resource, it cannot be a stream or link to a player like a Youtube URL.  See the information below on using Capacity's Knowledge Base for this.
  • Thumbnail URL is an address for the image shown before the user plays the video.  This is useful when your video starts with an unappealing image.
  • Video Type should contain information on the video's type, like "video/mp4" or "video/quicktime".  If the video plays in your browser without an issue, it should be fine.
  • Link is non-functional for custom videos.
Helpdesk Card

The Helpdesk Card provides a way for you to display tickets the logged in user has filed, directly in the Concierge. This can make it easy for your team members to have a quick reference for any tickets they have recently logged.

Selecting the Helpdesk card type will display a list of Helpdesk tickets that were reported by the authenticated user who is interacting with the Concierge.

After selecting the Helpdesk card type, you have the ability to configure a few options by adding card sections and selecting the type from the dropdown.

  1. Description: This is a simple text field that will display above the list of tickets. This is not required, but if you want to add a description above the ticket list, you can put your text in the Value input.
  2. Created days ago: This field acts as a filter that will get applied to the ticket list that is displayed. This is not required, but should you want to filter the tickets based off of age, you can simply put in a number for the number of days you want to go back to pull tickets based off of their Creation Date. For example, if you only wanted to display tickets that were created in the last two weeks, you would put 14 in the Value input.
  3. Show completed tickets: This is a simple Yes/No selection. Default behavior will show all tickets.
HTML Card

HTML Cards are a great way to provide content which can't be added anywhere else in the Concierge's visual editor.  For example, you could embed a feed of social media posts that stays current!

Note that this card does require syntactically-correct code to render properly in the Concierge, so you may need to find a developer to help with more complex uses.

Before you begin, you must change one setting.  In your Concierge's settings, navigate to the Other tab, and check "Allow Javascript in Capacity response" if you're able.  Note that some organizations may not want to enable this for security reasons, so you should check with your IT Security team if you're unfamiliar with the risks.

Here's where you'll find the setting:

HTML Cards can contain three sections:

  • Title is the text that displays above the HTML content
  • The HTML Code section's value is where you'll paste your HTML code
  • Hide this card is non-functional at this time.

The sky's the limit with HTML Cards, so if you need help executing on your design, contact support@capacity.com.

Other Useful Information

Banner Color Change

In the first iteration of Capacity's Concierge, organizations could set the color of the Concierge with a HEX value.  This often then required edits to a company logo - usually shading it white or black.  In version 2.0, all Concierge headers default to white, which means that any color of logo can now be used.  But if you'd previously used a white Concierge logo, it will not appear against the default white background.  Custom CSS can be used to help. Contact Capacity Support for more help if needed.


Was this article helpful?