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 a chat snippet in LibraryH3lp (the embed code you received in your welcome email) has three major elements -- a queue, a chat box skin, and your online/offline appearance. The queue (which we'll cover in Zero to Hero #4) determines who receives chats. The chat box skin determines what the chat box looks like. And the online/offline appearance determines what guests see on your web page when chat is online/offline.

You can also set other chat features within a chat snippet, like chat box behaviors (embedded, pop-out, and follow-me) as well as proactive chat invitations.

Pro tip! If your website CMS does not allow you to include JavaScript, use an IFRAME or link in lieu of your chat snippet. You can also use simple direct chat box URLs to reach users in email, text messages, social media, etc... If you go this route, you can skip Steps 1-6 below but you'll still want to checkout updating chat box skins lower in the page.

Ok, let's dive into chat snippets!

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: Review the chat snippets available to you.

Click on the "Chat Snippets" button in the left sidebar. The chat snippet that came in your Welcome email should be labeled something like "welcome email snippet."

You may have more than one chat snippet available to you in the list. If so, each chat snippet gives you a different look for chat in your web pages. If you don't like the look of the chat snippet in your welcome email, then perhaps one of the others is closer to what you are after. If so, swap out the chat snippet code from the welcome email with the embed code from on of the other chat snippets on your web page.

Step 3: Edit a chat snippet to change the current settings.

Select the chat snippet from the list 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.

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.

Under the 'Routing for incoming chats' section, look for the 'Online appearance' tab. The online appearance for embedded chat boxes is, of course, the chat box itself. But for pop-up and follow-me styles you can customize the online appearance to suit. Any valid HTML is acceptable. On your web page, whatever you set as your online appearance will appear as a link which launches the chat box.

Also under the 'Routing for incoming chats' section, you'll see a thumbnail of your chat box skin. Click that thumbnail to select among the various chat box skins avialable to you. If you want to customize your chat box skin, there are instructions lower in this page that walk you through how to use the chat box skin designer.

Step 4: (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 5: 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.

Step 6: Save your changes.

Like what you see? Click on the "Save" button at the bottom of the screen. When you save, the chat snippet included in your website will be instantly updated. Super handy, especially if you can't directly update the website yourself.

Updating Chat Box Skins

Step 1: Click Chat Skins in the left sidebar of the admin dashboard.

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

Step 2: Select your chat skin.

In the chat box skins designer, you'll see a gallery of your available chat box skins. There may only be one in your gallery if you are just starting a trial, or you might have a few available that coordinate with your website. Hover over a chat box skin in the gallery to reveal the edit button.

Step 3: Edit your chat box skin. Play around. 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 Basics section); this customizes the shared 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 4: Save your changes.

Like what you see? Click on the "Save" button at the bottom of the screen. Want to start over? Click on the "Cancel" 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.

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