Zero to Hero: Pimp my chat

You are officially on your way to a successful chat service! Now that you know how to bring your chat box online and chat with guests, you'll want to trick out your chat box.

Before we begin, it is important to know that your chat service in LibraryH3lp has two major elements -- a queue and a chat box skin. The queue (which we'll cover in Zero to Hero #4) determines who receives chats. The chat box skin (which we'll cover in Steps 1-5 of this installment) determines what the chat box looks like.

The chat snippet you received in your Welcome email combines a queue and a chat box skin and gives you the embed code you need for your web page. You can also set other chat features within a chat snippet, like chat box behaviors, custom online/offline appearances, and proactive chat invitations.

Pro tip! If your website CMS does not allow you to include JavaScript, use an IFRAME in lieu of your chat snippet.

Ok, now we're ready to talk about chat box skins. That is, what your chat box will look like...

Step 1: Log into the admin dashboard.

If you need it, there is a link at the top of this page. You are now staring at the LibraryH3lp admin side of LibraryH3lp. Everything we'll be doing in this installment is done through the admin dashboard, which helps you configure and manage your chat service. Note that this is a different beast than the webclient, which you used in the previous installment to chat with guests, and can't be used to chat with guests.

Step 2: Click Chat Skins in the left sidebar.

Now, we're ready to customize that boring default chat box!

Step 3: Select your chat skin.

Using the drop-down menu (just under the New Widget button), select your skin; there will probably be only one in your list if you're just starting a trial. That will be the one you want.

Step 4: Play around. That's right. Have fun. Go wild!

There are tons of things you can customize in your skin. Play around and you'll see all the changes you make appear in real time.

You'll definitely want to set a Typing Notification Identity (under the Branding section); this customizes the identity the guest sees during a chat.

You can even get fancy and embed a guest survey link within your chat box, insert a banner image in your chat box, make the title clickable, or add a background image to your chat box.

Pro tip! Need design inspiration? Check out our Ask-a-Librarian Pinboard.

Step 5: Save your changes.

Like what you see? Click on the "Save Widget" button at the bottom of the screen. Want to start over? Click on the "Discard Changes" button instead. When you save, the chat box embedded in your website will be instantly updated. Super handy, especially if you can't directly update the website yourself.

We're done with our skin, so next we'll move on to our chat snippet. Remember, a chat snippet combines a queue (chat routing) with a skin (chat box appearance) and also bundles features like behavior, custom online/offline appearance, and proactive chat invitations.

Step 6: Update your chat snippet to choose a chat box behavior.

Click on the "Chat Snippets" button in the left sidebar. Select your chat snippet on the left and click its 'Edit' button on the far right.

At the top of the chat snippet's Edit page, you'll see three different chat behaviors - embedded, pop-up, and follow-me.

Pro tip! Chat snippets connect queues (chat routing) to chat box skins (chat box appearance) in the form of a code snippet you cut/paste into a web page. Chat snippets also bundle features like custom online/offline appearance and proactive chat invitations.

Embedded is great for visibility, but not so great if the guest needs to navigate your site while chatting. Pop-ups are launched in a separate window and work best for guests on mobile devices. Follow-mes hover over the page. For more info, read our detailed discussion about each of the styles and their pros/cons.

Pro tip! Despite the name, pop-up chat boxes are NOT blocked by browser popup blocker add-ons since the guest clicks to launch chat.

Step 7: (optional) Add a proactive chat invitation.

Under the 'Routing for incoming chats' section, look for the 'Proactive options' tab and click it. Proactive chat invitations come in two basic flavors - a button dialog or an image dialog. For the image dialog, we offer a default "Chat now" image as well as several other choices. Alternatively, you can opt to use any image you'd like. And there are 24 different theme options available for your proactive invitation.

So what happens when a guest declines your invitation? After all, you don't want to risk annoying the guest as they navigate your site with a recurring invitation on each page visit. No worries. For that, we have a cookie that remembers that the guest has declined your proactive invitation. When you are testing your proactive invitation and need to trigger the dialog again, simply delete the "libraryh3lp-shhh" cookie or restart your browser and you're ready to go.

Step 8: Customize your offline appearance.

Now look toward the bottom of the chat snippet edit page for Show when offline.

You can place any valid HTML (including just plain text) in the Offline tab. Some popular options include images, a mailto link, and contact forms.

Next, we'll talk about adding user accounts and collaboration so you can get all your colleagues on board!

Document URL:

©2019 Nub Games, Inc.