Setup feedback widget CSAT

Easily collect real-time feedback from your users by embedding the Roadloom Feedback Widget into your application. Follow the steps below based on the framework you're using.

Step 1

Before you begin, ensure you have:

A valid Widget ID (provided by Roadloom)
Access to the following user data on the frontend:
- user.id (Required)
- user.name (optional)
- user.email (optional)
- user.company (optional)

Visit Feedback channels > Widget > Copy widget ID

Step 2

You must add your domain(s) in the widget dashboard. For security reasons, widgets will only load on approved domains and note that localhost is not allowed. To test the widget locally, we recommend using a tunneling tool like ngrok.

This domain must exactly match the domain where the widget will be loaded.

Plain JavaScript / HTML

Place this just before the closing </body> tag on any HTML page.

<!-- Include this in your HTML -->
<script src="https://app.roadloom.com/widget/feedback-widget.js" async></script>

<!-- Add the widget container -->
<div id="roadloom-feedback-widget"></div>

<script>
  setTimeout(() => {
    window.roadloomFeedback?.render({
      widget_id: "YOUR_WIDGET_ID",
      user_id: user.id,
      customer_name: user.name,
      customer_email: user.email,
      company: user.company,
    });
  }, 200);
</script>

React

Add <FeedbackWidget /> wherever you want the widget to appear.

import React, { useEffect } from "react";

export const FeedbackWidget = ({ user }) => {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://app.roadloom.com/widget/feedback-widget.js";
    script.async = true;
    document.body.appendChild(script);

    const timeout = setTimeout(() => {
      window.roadloomFeedback?.render({
        widget_id: "YOUR_WIDGET_ID",
        user_id: user.id,
        customer_name: user.name,
        customer_email: user.email,
        company: user.company,
      });
    }, 200);

    return () => {
      clearTimeout(timeout);
      document.body.removeChild(script);
    };
  }, [user]);

  return <div id="roadloom-feedback-widget" />;
};

Angular

Include <app-feedback-widget></app-feedback-widget> in your component template.

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-feedback-widget',
  template: '<div id="roadloom-feedback-widget"></div>',
})
export class FeedbackWidgetComponent implements OnInit, OnDestroy {
  private scriptElement!: HTMLScriptElement;
  private timeoutId: any;

  ngOnInit(): void {
    this.scriptElement = document.createElement('script');
    this.scriptElement.src = 'https://app.roadloom.com/widget/feedback-widget.js';
    this.scriptElement.async = true;
    document.body.appendChild(this.scriptElement);

    this.timeoutId = setTimeout(() => {
      (window as any).roadloomFeedback?.render({
        widget_id: "YOUR_WIDGET_ID",
        user_id: user.id,
        customer_name: user.name,
        customer_email: user.email,
        company: user.company,
      });
    }, 200);
  }

  ngOnDestroy(): void {
    clearTimeout(this.timeoutId);
    document.body.removeChild(this.scriptElement);
  }
}

Vue

Use <FeedbackWidget /> in your layout or component.

<template>
  <div id="roadloom-feedback-widget"></div>
</template>

<script>
export default {
  name: "FeedbackWidget",

  mounted() {
    const script = document.createElement("script");
    script.src = "https://app.roadloom.com/widget/feedback-widget.js";
    script.async = true;
    document.body.appendChild(script);

    this.timeoutId = setTimeout(() => {
      window.roadloomFeedback?.render({
        widget_id: "YOUR_WIDGET_ID",
        user_id: this.user.id,
        customer_name: this.user.name,
        customer_email: this.user.email,
        company: this.user.company,
      });
    }, 200);

    this.script = script;
  },

  unmounted() {
    clearTimeout(this.timeoutId);
    document.body.removeChild(this.script);
  },

  props: ["user"],

  data() {
    return {
      script: null,
      timeoutId: null,
    };
  },
};
</script>

Once your domain is set up properly and the widget is installed, you’ll be ready to collect user feedback directly inside your product with zero friction. If you need any help along the way, don’t hesitate to reach out to us.