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.

Note that this article covers version 2.0 of the Capacity Concierge for the web which is in a BETA release as of April 2023. Not all concierges can be updated at this time, and it's possible that an implementation using custom CSS could experience issues in the upgrade. It's recommended that you test any

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.

Team UUIDs can be found by navigating to Settings > Org Management > Teams, and selecting the team. The UUID is the long suffix to the URL, found in your browser's address bar, a series of groups of letters and numbers separated by hyphens.

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.

All Card Text, Start Button Text, and Trigger Inquiry fields should all be filled for proper functionality. You need to replace the placeholder values in light gray.

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.

Info banners are blue, and are best for providing general information
Success banners are green and intended for a big announcement or accomplishment
Warning banners are yellow, and alert users to an important event or task
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:

Note that the Helpdesk card is still under active development as of Q2 2023, and may not work as expected.

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

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.

Title
Image
Label
Header
Description
Button Stack
URL Buttons
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.

Image and Video content will appear above other types of content in a content card, regardless of sort order index values.

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.

Links to images outside of Capacity can break as websites change. If you want a reliable URL for your images, you can upload your files to your Knowledge Base, and turn on a public link. Then specify that link as your URL.

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.

Titles, Labels, and Headers are all largely the same, but appear differently. You can experiment with each in the Concierge Visual Editor in Concierge Settings, and decide what makes the concierge visually flow best.

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.

Each button in a Button Stack launches the user into an Exchange or Guided Conversation in your Knowledge Base. Because of this, you'll want to ensure that each button matches an inquiry. Think of it as the user clicking what they'd ordinarily type to the concierge.

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.

Note that "Embedded Video" takes priority over the other fields, in the event of conflicting information.

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.

Similar to Images, Links to videos outside of Capacity can break as websites and files change. If you want a reliable URL for your videos, you can upload your files to your Knowledge Base, and turn on a public link. Then specify that link as your URL.

Helpdesk Card

The Helpdesk Card is under active development and shouldn't be used at this time.

HTML Card

HTML Cards will not function in a concierge until Javascript is allowed in Concierge Settings. See below.

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?