Embedding the AI chatbot on any website

The chatbot is a single JavaScript file served from helpwp.dev/cdn/chat.min.js. Drop one <script> tag on any page (WordPress, static HTML, React, anything) and the widget mounts itself in the corner.

Get your snippet

  1. Go to HelpWP -> Settings -> AI -> Chatbot.
  2. Configure the agent name, avatar, color, position, and any of the advanced options.
  3. Click View Code. A modal shows the snippet pre-filled with your site key and the chosen attributes.
  4. Click Copy to Clipboard.

Paste it into your site

The snippet should sit just before the closing </body> tag. Three common ways:

  • Your WordPress theme (any theme): paste it into footer.php just before </body>. Use a child theme if you do not want it overwritten by theme updates.
  • A “header & footer scripts” plugin (Insert Headers and Footers, WPCode, etc.): paste the snippet into the Body section.
  • A non-WordPress site: paste it into the page template just before </body>.

The “Download Plugin” shortcut

For customer sites running WordPress, the Download Plugin button on the same screen packages the snippet into a tiny single-file plugin called helpwp-chatbot.php. The customer installs the plugin like any other (Plugins -> Add New -> Upload), activates it, and the chatbot appears on their site – they never have to edit code or footer files.

Live preview before you ship

Click Preview to mount the widget on the settings page itself, configured with the current form values. Re-clicking refreshes the widget so changes (color, name, welcome message, etc.) take effect immediately. This avoids a save-copy-paste-test loop.

What appears on the visitor’s site

A round chat-launcher button in the corner with your primary color. Click it and the chat panel slides up. The first message is your welcome line; suggested-prompt chips (if configured) appear above the input. The visitor types a question; the widget posts it to the RAG service with your site key; the answer streams back into the panel.

The conversation persists per-browser in sessionStorage. Closing the tab clears it.

Authentication

Every request from the widget is signed with the data-site-key attribute on the script tag. This is intentionally a public key – it is the equivalent of a Google Maps API key. Misuse can be detected and the key revoked from your admin.

Next step

Read Customizing the chatbot for the full reference of every available attribute.

Was this doc helpful?

Scroll to Top