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 align the widget with your brand guidelines, you can customize its accent colors. We support the following theme options:

Productlane.init({
  widgetKey: "<your-widget-key />",
  theme: {
    "--accent-color": "#1692A4",
    "--accent-color-dark": "#1692A4",
  },
});

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

Dark Mode

You can also explicitly set the widget's color mode:

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

Supported values are "light", "dark", and "auto". The "auto" option adapts to the user's operating system theme preference.

You can also change the widget theme dynamically using the Productlane.set method.

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",
});

Changelog notifications

If you want to prevent the changelog notification popup from appearing and instead have the widget display as usual, you can use the disableChangelogNotification option. This can be useful, for example, when you want to hide the popup for selected users.

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

When set to true, the changelog popup will not appear, and the widget will behave normally. Setting it to false (or omitting it) will keep the default behavior where changelog popups are shown when new changelog were published.

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" }
});