By going to Settings > Widget, you can easily add a widget to your site. It only takes a few lines of JavaScript to set up, providing you with a simple way to unify your support, Changelog, docs, and AI Chat for your customers. You can customize the widget’s appearance to fit your site’s design, listen to events & more.

Installation

Embed & initialize
Head to the widget settings page, there you’ll find a copy/pastable snippet that looks like the snippet below. Or simply copy the code below and replace <your-widget-key /> with your workspaces’ widget key.

<script>
  ;((w)=>{const P=(w.Productlane={queue:{}});["set","open","close","toggle","on","off","init"].forEach(m=>{P[m]=(n=>function(){P.queue[n]={args:arguments}})(m)})})(window);
  
  Productlane.init({
    widgetKey: "<your-widget-key />",
  })
</script>
<script 
  async 
  defer 
  crossorigin="anonymous"
  src="https://widget.productlane.com/latest.productlane-widget.min.js"
></script>

That’s it!
While this is all you have to do, let’s briefly unwrap what happens in the snippet.
The first script sets up the global Productlane object used to communicate with the widget. It also initializes the widget via Productlane.init() with your corresponding widget key.
The second script tag loads the widget from Productlane’s CDN.

API

Widget key

The widget key can be found on your widget settings page.

Productlane.init({
  widgetKey: "<your-widget-key />",
});

User

An object containing information about the current user for simple authentication. Will hide the email field in the feedback form if provided.

Productlane.init({
  widgetKey: "<your-widget-key />",
  user: {
    email: "raphael@productlane.com",
  },
});

Theme

To make the widget properly align with your brand guidelines, you can heavily customize each aspect of it. We support the following theme options:

Productlane.init({
  widgetKey: "<your-widget-key />",
  theme: {
    "--accent-color": "#1692A4",
    "--accent-color-dark": "#1692A4",
    "--text-color-primary": "#111827",
    "--text-color-primary-dark": "#FFFFFF",
    "--text-color-secondary": "#9CA3AF",
    "--text-color-secondary-dark": "#9CA3AF",
    "--background-color-primary": "#FFFFFF",
    "--background-color-primary-dark": "#111827",
    "--background-color-secondary": "#F3F4F6",
    "--background-color-secondary-dark": "#1F2937",
    "--border-color-primary": "#E5E7EB",
    "--border-color-primary-dark": "#1F2937",
  },
});

The widget will automatically apply either the regular or -dark variants, based on the user’s current system preference.

Make sure custom CSS is enabled in the widget settings to apply custom themes.

Positioning

To control where the widget appears on your site, use the position option. These setting let you choose which side of the screen the widget button appears on and which direction the widget opens.

position ("left" , "right" or "center"):
Sets the default side of the screen where the widget button is placed. The widget panel will open in the opposite direction relative to the button and remain close to it, or appear centered if position is set to "center".
For example, position: "right" places the button on the right edge of the screen, and the widget opens toward the left.

Here is an example of widget positioning:

Productlane.init({
  widgetKey: "<your-widget-key />",
  position: "left",
});

Widget methods

Once the widget is initialized, you can use these methods to interact with it.

Productlane.open(view?: "INDEX" | "CHANGELOG" | "DOCS" | "FEEDBACK")
Opens the Productlane widget. By default, it opens the last active view, but you can optionally specify a view to open directly:
- "INDEX" – opens the main index view with all navigation links.
- "CHANGELOG" – opens the latest changelog.
- "DOCS" – opens the documentation navigation menu. (Use Productlane.openDocs() method to open a specific article.)
- "FEEDBACK" – opens the contact form where users can leave feedback, report bugs, or ask questions.
The view argument is case-insensitive, so "changelog", "Changelog", and "CHANGELOG" all work the same.
Productlane.close() Closes the widget.
Productlane.toggle() Toggles between opening and closing the widget.
Productlane.disable() Disables the widget across the entire page.
Productlane.enable() Enables the widget.
Productlane.openDocs(documentUrlName | documentId) To open a specific article. You can pass either:
- documentUrlName – the URL path of the article, like "get-started/quickstart"
- documentId – the internal ID of the document
Productlane.set() For setting certain widget properties. Equal to the settings object in Productlane.init().

Productlane.init({
  widgetKey: "<your-widget-key />",
});

Productlane.on("loaded", () => {
  Productlane.set({
    user: {
      email: "raphael@productlane.com",
    },
  });
});

Make sure to call any methods after the widget is initialized, e.g. like so: Productlane.on('loaded', () => {/* Your code here */}).

Widget events

You can listen to the following events:

Productlane.on("loaded", () => {}) Fires when the widget is fully loaded. Make sure to call any methods in the callback of this event.
Productlane.on("opened", () => {}) Fires after the widget is opened.
Productlane.off("opened", () => {}) Removes event listener for opened event.
Productlane.on("closed", () => {}) Fires after the widget is closed.
Productlane.off("closed", () => {}) Removes event listener for closed event.
Productlane.on("toggled", () => {}) Fires after the widget is toggled.
Productlane.off("toggled", () => {}) Removes event listener for toggled.
Productlane.on("customLinkClicked", (link) => {})
Productlane.on("openDocsPage", ({id, title, urlName}) => {}) Fires when a docs article is opened.

Productlane.on("customLinkClicked", (link) => {
  console.log(link); // { "title": "Docs", "url": "productlane.com/docs" }
});

Widget

Table of Contents