Can I proactively invite guests to chat?

You've probably been on a website that not only includes a chat option on the page but also proactively invites you to chat after you've spent some time on the page. Love it or hate it, this technique can increase patron engagement (Zhang and Mayer, 2014). You can do that within LibraryH3lp too! 

Broken down, the four main components are:

1. A presence (availability) check to make sure that your chat queue is online before prompting the guest to chat. After all, we don't want to risk annoying the guest if we're not online to help.
2. A timer to control the amount of time that will elapse before the chat invitation is presented. Zhang and Mayer's paper reports success using three minutes - substantially longer than many commercial websites.
3. A graphical dialog to control the appearance of the chat invitation. This part can be heavily customized, and we offer two different styles - a dialog with buttons and a dialog featuring a customizable chat invitation image. Plus there are many theme options for your proactive invitation.
   
4. A session cookie that is set when a guest declined the proactive chat invitation. We don't want to risk annoying the guest if they are not interested in chat. Most commonly, session cookies are deleted by the browser as a matter of course when the guest closes the browser.

Offering your guests an invitation to chat proactively after a time-based trigger is straightforward and can be configured as part of any LibraryH3lp service. 

How do I get my proactive chat invitation to appear correctly within Ebsco?

Symptom: My proactive chat invitation is stuck inside the sidebar

If you have a chat snippet embedded within the sidebar you'll probably find that if you enable proactive chat invitations on that snippet, the proactive chat invitations are restricted to the chat widget in the sidebar and won't freely float over the rest of the page. This is because Ebsco sandboxes the chat snippet inside an iframe. The workaround is to add a second, "proactive-only" chat snippet to Ebsco which is not placed within the sidebar but instead you'll add the chat code snippet as part of the footer or your EDS customizations.

Symptom: My proactive chat invitation looks a little weird and doesn't "float" over all the elements on the page

LibraryH3lp proactive chat invitations use a common, 3rd party library (jQueryUI) to present the invitation dialogs to patrons. Ebsco has it's own styling for the dialogs from this 3rd party library which override any theme you may choose for your proactive chat invitation.  If you are adding a proactive chat invitation, you'll probably want to add the following bit of custom styling to the "Offline Appearance" area of your chat snippet (for pop-up and follow-me chat boxes) or directly to Ebsco (for embedded chat boxes):

<style type="text/css">
  .ui-dialog { 
    z-index: 1000;
  }
  .ui-dialog .ui-widget-header button.ui-button .ui-icon-closethick {
    margin: -8px;
  }
  .ui-dialog .ui-widget-header {
    padding: 20px 0 0 15px;
  }
  .ui-dialog .ui-widget-header > span:first-child {
    font-size: 1.2em;
  }
  .ui-dialog .ui-dialog-content p {
    font-size: 1.2em;
    margin-top: 20px;
  }
  .ui-dialog .ui-resizable-se {
    display: none !important;
  }
</style>

Symptom: My proactive chat invitation always appears in the top, right corner no matter how I configure its placement.

The proactive chat invitation uses a common 3rd-party library called jQueryUI to make the chat invitation dialog, and Ebsco defines a function called window.preventDefault, which overrides the jQueryUI code that handles placement. 

<script type="application/javascript">
  window.preventDefault = undefined;
</script>

EBSCO Ebsco ebsco EDS eds

How can I use proactive chat invitations within LibGuides?

Proactive chat invitations work within LibGuides.  But LibGuides defines its own styling for the proactive chat invitations and so the proactive theme you select within your LibraryH3lp chat snippet will not be used.

One common issue with proactive chat invitations in libguides is that the X (close icon) in the title of the proactive chat invitation is slightly off center.

To correct that, you can add the following custom styling to the Offline Appearance area of your chat snippet in the LibraryH3lp admin dashboard IF your chat snippet uses either the pop-up or follow-me style widget:

<style type="text/css">
  .s-lg-guide-body .lh3-proactive-invitation .ui-widget-header button.ui-button span:first-child,
  .s-lib-public-body .lh3-proactive-invitation .ui-widget-header button.ui-button span:first-child {
    margin: -8px;
  }
</style>

If your chat snippet uses the embedded style widget, you'll insert the HTML above directly into LibGuides, either before or after your chat snippet embed code.

libguides Libguides LibGuides

What if I don't want an in-page chat option? Can I still use proactive chat invitations?

You can have proactive chat invitations with or without a corresponding in-page chat option. 

If you only want a proactive chat invitation with no in-page chat box or button, here's how to configure your chat snippet:

1. Select a pop-up chat widget style.
2. For the "Online appearance," remove everything and add a span with a style that sets a bit of text (like "chat with us") to not display, like this:
   <span style="display:none;">chat with us</span>
3. Configure the proactive chat invitation as desired.
4. For the "Offline appearance," remove everything and add an empty span like this:
   <span></span>
5. For the "Browser JavaScript disabled / Service error" appearance, remove everything and leave it blank (empty).
6. Save your new chat snippet and copy/paste its embed code into your web page.