Basics

Embed a template to your website

This article is outdated. While the concepts described probably still apply, much of the interface has changed. The article is currently being updated.

To embed a template, you simply need to enable the embedded mode for the template in Bluepic Studio.

  1. Go to your template browser and navigate to the folder that contains the template you want to embed.

  2. Click the </> icon to open the embed dialog.

  3. Purchase an embedding license for the template and complete the payment process.

  4. Click the code buttons in the small preview at the bottom left of the popup to get the direct link to embed or a preconfigured iframe code block.

Use the iframe codeblock

The iframe code block provides a ready-to-use iframe with some configurations, such as whether the iframe displays an editor or whether the editor is in dark mode. These settings are passed as query parameters in the iframe URL and can be changed.

This is how such a code block normally looks like:

<iframe
    src="http://localhost:5173/template/default-demo/Agenda?darkMode=false&showEditor=true&optimize=false"
    style="width: 800px; height: 600px;" />

Change style

To change the size or style of the iframe, simply use CSS as you normally would. If you're not familiar with CSS, you can control the width and height within the embed popup, which will affect the generated code block.

Last updated