By going to Settings > Widget, you can easily add a feedback and changelog widget to your site. It only takes a few lines of JavaScript to set up, providing you with a simple way to send feedback, indicate its priority, provide custom links and display your changelog.

This widget allows users to directly connect with the engineering team, in addition to the usual support channels.

You can customize the widget’s appearance to fit your site’s design, listen to events & more.

​
Setting up the widget

1

Embed & initialize the widget

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>
2

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

​
Settings

widgetKey (required)

Your workspace’s widget key. Can be found on your widget settings page.

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

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 (optional)

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: {
    "--text-color-primary": "#111827",
    "--text-color-primary-dark": "#FFFFFF",
    "--text-color-secondary": "#9CA3AF",
    "--text-color-secondary-dark": "#9CA3AF",
    "--text-color-highlight": "#1692A4",
    "--text-color-highlight-dark": "#1692A4",
    "--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.

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

​
Methods

Once the widget is initialized, you can use some of the following methods to interact with it.

  • Productlane.open() Opens the widget.

  • Productlane.close() Closes the widget.

  • Productlane.toggle() Toggles the widget.

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

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

​
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 the event listener for the opened event.

  • Productlane.on("closed", () => {}) Fires after the widget is closed.

  • Productlane.off("closed", () => {}) Removes the event listener for the closed event.

  • Productlane.on("toggled", () => {}) Fires after the widget is toggled.

  • Productlane.off("toggled", () => {}) Removes the event listener for the toggled event.

  • Productlane.on("customLinkClicked", (link) => {})

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

Removes the event listener for the customLinkClicked event.

LinearRoadmap