Zero to Hero: Pimp my chat box

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.

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.

Step 6: Pick your chat box behavior.

Click on the "Chat Snippets" button in the left sidebar. Select your code snippet on the left and click its 'Edit' button on the far right. At the top of your service's page, you'll see three different chat behaviors - embedded, pop-up, and follow-me.

Pro tip! Services connect chat box skins to queues in the form of a code snippet you cut/paste into a web page.

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.

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

Pro tip! If you'd rather your chat box be displayed all the time (even when you are offline), use an IFRAME in lieu of the code snippet.

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

Document URL: