Add the chat to your pages

One script tag, from your own site, on the pages that should show the chat.

One script tag puts the chat on a page. It loads from your own site, and only your site answers it.

01 · The tag

Paste it before </body>:

<script src="/opensolr-chat/widget.js" defer></script>

The Add to your pages tab of the admin shows this same tag with the path your chat is mounted on. If you changed base_path, copy it from there.

On the pages of a visitor who is signed in to your site, the tag can also carry the visitor’s email and its signature, so the Stats and the History show who asked. See Signed-in visitors.

02 · Where to put it
  • On every page: in the template that every page shares, usually the footer of your theme or layout, just before </body>.
  • In a CMS: in the theme’s footer template, or in its setting for scripts at the end of the page, if it has one.
  • On some pages only: leave the tag out of the others. On opensolr.com, for example, it is on every page except the search pages.

Loading the tag twice on one page does no harm: the chat starts once.

03 · It must come from your own site

The chat you install works only on pages of the site it is installed on. A page on another host that loads the script cannot read the chat’s settings and shows no chat button. To have it on two sites, install it on each.

That also counts between www.example.com and example.com. Keep the address in the tag relative, as above, starting with /, and the script always comes from the host the visitor is on.

Behind a reverse proxy, the proxy must pass on the host name the visitor used, or every question is refused with This chat answers only on its own site. See Behind a proxy.

One chat on several sites, with nothing to install?

The hosted chat that Opensolr runs for you answers on every domain you list, from one line of embed code: Put the chat on your site.

04 · What it adds to your page
  • One element at the end of the page, <opensolr-chat-bot>, with the button and the window isolated inside it, so your styles and the chat’s never mix.
  • When the captcha has to be shown: the reCAPTCHA script from Google and its box over the window.
  • In the visitor’s browser: the conversation with the visitor’s ratings, the size of the window and the solved captcha, under names starting with opensolr-chat:, and the cookie opensolr_chat_pass when the captcha is on.
  • With each question, the address of the page it was asked on, without its query string, for the Stats; and when the visitor rates an answer or opens one of its links, a short note of it to your site.

The script itself is checked by the browser on every page load and downloaded again only when it changed, so an update of the client reaches your visitors on their next page view.

05 · Content-Security-Policy

If your site sends a Content-Security-Policy header, it must let your pages load the script from your own site, make requests to it, show your logo from it and the photos of the products the chat answers with (https: in img-src), and, with the captcha on, load reCAPTCHA. For example:

script-src 'self' https://www.google.com/recaptcha/ https://www.gstatic.com/recaptcha/;
frame-src https://www.google.com/recaptcha/ https://recaptcha.google.com/;
connect-src 'self';
img-src 'self' https:;

Add these to the policy you already have; do not replace it. Two things you do not need:

  • No style-src 'unsafe-inline'. The chat styles itself with a constructed stylesheet, which is not inline CSS, so a policy without 'unsafe-inline' still shows it as designed.
  • Nothing for cross-origin isolation. widget.js and your logo are sent with Cross-Origin-Resource-Policy: cross-origin, so pages that send Cross-Origin-Embedder-Policy: require-corp load them too.

On your site

The Opensolr Chat Bot Client is open source and MIT licensed. Questions about your Opensolr account, index or plan go to opensolr.com/contact; questions about the client itself belong on GitHub.

Opensolr Chat Bot Documentation