Embedded editor

The Embedded Editor is a version of the editor that can be embedded into your own website or application. It provides an editor similar to the one you see in the dashboard, but it has some limitations and disables access to certain features like: tags, exporting templates, image gallery, render settings, and preview mode.

To use the Embedded Editor, you need to create a template in the dashboard first, and enable the "Embedded Editor" option in the template settings.

Once you have it, you can embed the editor into your website or application using the following code:

<iframe src="https://renderform.io/share/editor/?i=your-template-id" width="100%" height="800px" frameborder="0"></iframe>

Replace your-template-id with the ID of your template. You can find the template ID in the URL of the template in the dashboard. You can also customize the width and height of the iframe to fit your needs.

At the start, users will see the "Start Designing" button, which will open the editor with the template you specified.

Once the editor is opened, users can drag and drop elements, edit text, change colors, and customize the template as needed, and then save the changes.

Newly created templates will be saved to your account, like any other template created in the dashboard.

Event messages

You can receive messages from the Embedded Editor using the window.postMessage API.

<script>
  window.addEventListener('message', function(event) {
    console.log("Message received from the embedded editor: " + event.data);
  });
</script>

Currently, the following messages are sent from the Embedded Editor:

When the user clicks "Start Designing" button, the Embedded Editor will send a message to the parent window with the following data:

{
  "type": "template:create",
  "templateId": "id-of-the-template"
}

When the user saves the template, the Embedded Editor will send a message to the parent window with the following data:

{
  "type": "template:save",
  "templateId": "id-of-the-template"
}