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

FAQ URL: