Chat Widget

RunLLM’s chat widget can be installed on any documentation site that allows importing custom Javascript elements. Here are specific instructions for common documentation platforms.

At the bottom of the page, you can find details explaining how to customize the widget’s appearance.

Docusaurus

Add the following to your docusaurus.config.js

 scripts: [
    {
      id: "runllm-widget-script",
      type: "module",
      src: "https://widget.runllm.com",
      "runllm-server-address": "https://api.runllm.com",
      "runllm-assistant-id": "<assistant_id>",
      "runllm-position": "BOTTOM_RIGHT | BOTTOM_LEFT | TOP_RIGHT | TOP_LEFT",
      "runllm-keyboard-shortcut": "Mod+j",
      "runllm-preset": "docusaurus",
      "runllm-slack-community-url": "<slack_url",
      "runllm-name": "RunLLM",
      "runllm-theme-color": "#fcba03",
      "runllm-brand-logo": "https://pbs.twimg.com/profile_images/1682079891376750592/3vbjro2c_400x400.jpg",
      async: true,
    },
  ],

MKDocs

To install the chat widget on an mkdocs site, create a javascript file named runllm-widget.js and add it to the docs/js folder.

// docs/js/runllm-widget.js:

document.addEventListener("DOMContentLoaded", function () {
  var script = document.createElement("script");
  script.defer = true;
  script.type = "module";
  script.id = "runllm-widget-script";
  script.src =
    "https://widget.runllm.com";
  script.setAttribute("runllm-preset", "mkdocs");
  script.setAttribute("runllm-server-address", "https://api.runllm.com");
  script.setAttribute("runllm-assistant-id", "<YOUR_ASSISANT_ID>");
  script.setAttribute("runllm-position", "BOTTOM_RIGHT");
  script.setAttribute("runllm-keyboard-shortcut", "Mod+j");
  script.setAttribute(
    "runllm-slack-community-url",
    "<YOUR_SLACK_COMMUNITY_URL>"
  );
  script.setAttribute("runllm-name", "RunLLM");

  document.head.appendChild(script);
});

Next, add the javascript file to the extra_javascripts section of your mkdocs.yml:

### Other configuration ###

site_name: My Docs
site_url: https://mydomain.org/mysite
theme:
  name: material
extra_javascript:
  - "js/runllm-widget.js"

### Other configuration ###

Finally, run your website using mkdocs serve to test out your changes locally. If all goes well you should see a small widget in the bottom right corner of the page.

Customization

You can many aspects of the appearance and behavior of the RunLLM Widget using the following parameters.

Required Parameters

• id: Specifies the id to use for the root element of the RunLLM widget.
• runllm-assistant-id: ID of assistant to use. This value is provided by RunLLM. If you are unsure which value to use here, please contact us.
• runllm-position: Specifies where on the page to position the widget. Possible values for this parameter are: TOP_LEFT , TOP_RIGH` , BOTTOM_LEFT , BOTTOM_RIGHT

Optional Parameters

• runllm-server-address: API address used to to send requests to RunLLM. Defaults to https://api.runllm.com
• runllm-name: Sets the name of the assistant. i.e. Chat with "RunLLM Assistant"
• runllm-keyboard-shortcut: Sets the keyboard shortcut for activating the widget. Default: None
• runllm-preset: Configures the widget to use preset styling configuration. Currently supported presets are mkdocs and docusaurus. Please use the one corresponding to your documentation site.
• runllm-slack-community-url: URL used for users to join your Slack community. If a URL is provided, a banner will be shown allowing users to click and join your community. If no URL is provided, there will be no banner shown.