Form Embed

Embed a feedback form into your app or site

The form embed offers a seamless way to integrate a feedback form into your application or website. Embed the form inline or as a dialog.

Configuration

To customize the appearance of your embedded portal, go to Workspace > Settings > Form.

The form embed settings allow you to tailor the look and feel of the form to match your brand or audience. From the right-hand sidebar, you are able to change the title and subtitle, placeholder, color scheme, locale and more.

Alternatively you can use the advanced options below to specify the configuration via code.

Installation

To add the form embed to your website or app:

1

Click the install button

Click the Install button at the bottom of the configuration sidebar.

2

Copy the install code

Follow the instructions in the install panel. Copy the relevant code snippets and paste them into your website or app.

To enable users to log in, you must add the domain's URL to the list of trusted domains. The URL must include the subdomain. For example feedback.example.com.

Advanced options

Overwriting the UI settings

You can overwrite the configured styles and settings of the form embed by adding custom properties to the embed code. This allows for customizing the styling when embedding the form in different locations.

When a setting is configured via the properties below, it can no longer be customized via the UI settings.

The properties are specified as attributes within the <released-form> custom HTML element.

Form Properties

The following customization options are available for the form embed.

form-id	The ID of the feedback form to embed.
title	The title of the form.
sub-title	The subtitle of the form.
placeholder	The placeholder text shown in the form.
position	The position of the form if shown in a dialog. Can be top-left, top-right, bottom-right, or bottom-left.
dialog	Whether the form will be shown in a dialog true or inline false.
color-scheme	The color scheme to use for the widget. Can be system, dark, or light. See Configuring Dark Mode for more details.
locale	The locale to use for the page. Can be: en 🇺🇸 American English de 🇩🇪 German fr 🇫🇷 French es 🇪🇸 Spanish pt 🇵🇹 Portuguese nl 🇳🇱 Dutch zh 🇨🇳 Chinese

Data Attributes

Setting data attributes can be helpful to prevent unwanted interactions with 3rd party libraries. For example, to prevent scrolling issues when the Lenis library is used, you can add the data-lenis-prevent attribute to the host container.

Example:

<released-form form-id="FORM_ID" data-lenis-prevent=""></released-form>

Default values

The following default values are applied in case a property is not explicitly defined.

<released-form form-id="FORM_ID" 
  title="What's New"
  sub-title="The latest updates and improvements."
  position="bottom-right"
  trigger="#trigger"
  color-scheme="system"
></released-widget>