How do I include a chat box on a web page without using JavaScript?

 

Chat boxes have direct URLs, which makes it easy to include your chat box anywhere.  There are two common ways to include chat on your web page without using JavaScript: IFRAMEs and links.  An IFRAME lets you include a chat box within the flow of your page.  A hyperlink can be used to pop out a chat box on click.

Pro tip!  Besides the kind of direct URL we'll discuss in detail in this page, there is an alternative version that lets you provide email contact when chat is offline.

Links

You can create hyperlinks to chat boxes by combining your queue's name with a chat box skin ID.  Here are examples of creating a link that uses a chat image from our gallery.

In all of the examples, you need to swap out your real queue name for MY-QUEUE_NAME and your real chat widget skin ID for 123456.  You can link from any image or bit of text, such as "Chat with us!"

And if you use one of our regional servers, you need to change the URL slightly.  For example, on the Canada server, the URL has "ca" in two places: 

https://ca.libraryh3lp.com/chat/MY-QUEUE_NAME@chat.ca.libraryh3lp.com?skin=123456

 

Simple link to full-screen chat box:

<a href="https://libraryh3lp.com/chat/MY-QUEUE_NAME@chat.libraryh3lp.com?skin=123456" title="Click to chat">
  <img src="https://s3.amazonaws.com/libraryh3lp.com/us/buttons/ask-a-librarian/lime-ask-a-librarian.png " alt="chat now"/></a>

 

Open full-screen chat box in new window:

<a target="_blank" href="https://libraryh3lp.com/chat/MY-QUEUE_NAME@chat.libraryh3lp.com?skin=123456" title="Click to chat">
  <img src="https://s3.amazonaws.com/libraryh3lp.com/us/buttons/ask-a-librarian/lime-ask-a-librarian.png " alt="chat now"/></a>

 

Open chat box in a smaller, separate window*:

<a href="#" onclick="window.open('https://libraryh3lp.com/chat/MY-QUEUE_NAME@chat.libraryh3lp.com?skin=123456', 'chat', 'resizable=1,width=420,height=450'); return false;"><img src="https://s3.amazonaws.com/libraryh3lp.com/us/buttons/ask-a-librarian/lime-ask-a-librarian.png " alt="chat now"/></a>

*Note: opening the chat URL as a smaller, separate window requires a tiny bit of inline JavaScript (the window.open onclick), and if your website fully restricts JavaScript, this might be removed or otherwise disallowed.

 

IFRAMEs

You can embed a chat box on your web page using an IFRAME. IFRAMEs are handy if you cannot use JavaScript within a web page.  A chat box embedded using an iframe will always be visible and change status to show guests when you are offline.  There is no customizable offline display by default, but you can provide an email contact overlay with an alternative version of the chat box URL.

In the examples below:

• Replace my-queue-name with your real queue name. This controls how incoming chats are routed to operators.
• Replace the skin number using a skin ID found on the Chat widget skins page in the admin dashboard. The skin controls the cosmetic appearance of your chat box (colors, operator identity, sound on or off by default, custom CSS, etc...) but has nothing to do with chat routing. In the examples below, skin ID 123456 is just an example skin ID.
• The width and height dimensions for your chat box, to match your web site's available real estate. Percentage values are perfectly fine and essential if you wish to make your chat box responsive to different browser window widths.  It is usually best to set width to 100% so that the embedded chat box will fill up any container in which it is placed, such as a sidebar.
• If desired, the style of the frame border.  

Main server iframe example:

<iframe src="https://libraryh3lp.com/chat/my-queue-name@chat.libraryh3lp.com?skin=123456" frameborder="1" style="border: 2px inset black; width: 100%; height: 375px;"></iframe>

Canada server iframe example:

<iframe src="https://ca.libraryh3lp.com/chat/my-queue-name@chat.ca.libraryh3lp.com?skin=123456" frameborder="1" style="border: 2px inset black; width: 100%; height: 375px;"></iframe>

Europe server iframe example:

<iframe src="https://eu.libraryh3lp.com/chat/my-queue-name@chat.eu.libraryh3lp.com?skin=123456" frameborder="1" style="border: 2px inset black; width: 100%; height: 375px;"></iframe>

Asia/Pacific server iframe example:

<iframe src="https://sg.libraryh3lp.com/chat/my-queue-name@chat.sg.libraryh3lp.com?skin=123456" frameborder="1" style="border: 2px inset black; width: 100%; height: 375px;"></iframe>

 

 

 

FAQ URL: