Skip to content
Documentation

    Embedding the Feedback Form

    The form embed enables you to integrate a feedback form seamlessly into your app or website. Feedback from customers and stakeholders lands in the inbox.md for easy triage.

    Installation instructions

    Section titled “Installation instructions”

    1. Copy the Form ID

      Section titled “Copy the Form ID”

      Copy the form ID for the embed form.

    2. Select how to display your form

      Section titled “Select how to display your form”
      Form Settings Dialog

      The form can be shown inline, alongside the content where you embed it, or opened programatically.

    3. Add the embed script

      Section titled “Add the embed script”

      Add the following code snippet to the <head> section of your site.

      <script src="https://embed.released.so/1/embed.js" defer></script>

    4. Add the released-form element to your page

      Section titled “Add the released-form element to your page”

      Add the following code snippet to the <body> section of your site. Unlike the widget, the page content renders where you position the element. Ensure you replace the FORM_ID attribute.

      <released-form form-id="FORM_ID"></released-form>

      To automatically authenticate users, you can implement user verification and pass in the auth-token attribute.

      <released-form form-id="FORM_ID" auth-token="AUTH_TOKEN"></released-form>

    Open/Closing the dialog

    Section titled “Open/Closing the dialog”

    You can open the form programmatically using the Hub API:

    // Open the feedback form
    window.Released.show('form', 'your-form-id');
    

    // Close the feedback form
    window.Released.close('form', 'your-form-id');

    Example with a button:

    const openFeedback = () => {
      window.Released?.show('form', 'your-form-id');
    };
    

    <button onClick={openFeedback}>
      Feedback
    </button>

    Customize the page

    Section titled “Customize the page”

    1. Customize the page to match your brand and app design using the page properties. Adjust the title and description, or change the colors according to your preferences.

      Please see the documentation for a full list of configuration options.

    Example

    Section titled “Example”

    View an example of how to embed the page on CodePen.