Creating a new Widget

Table of content:

How to create a widget,
What to do in the widget-view,
Layout settings,
How to disable the Bluepic branding,
Export actions (Webhooks, Redirects, custom Download button).

To create a new widget, all you have to do is open the project editor of your template and switch to the widget-view.

Keep in mind that the widget-view will preview the current published version of your project. If you have not yet created a published version, you will be asked to do so before you can proceed.

Once you visit the widget-view of a project for the first time, you will have created an active widget with a unique shareable template URL.

The widget-view consists of a settings panel on the left (layout settings and export actions as individual tabs), a preview of your widget on the right (in a mock-up web browser), and some widget-specific actions in the toolbar at the top.

To configure your widget, you can:

Decide on a layout variant and configure the layout settings
Disable the Bluepic branding
Set up export actions (Webhooks, Redirects, customized download button)
Customize the shareable widget URL (custom URL slug, custom domain with CNAME)
Generate a code snippet for embedding
Generate an example API code snippet

Layout settings

From top to bottom the Layout settings are:

Layout

The two main layout options are Auto and Stacked.

The Auto layout is the default template editor, with the input form on the left, the preview on the right, and the Download button in a toolbar on top. On mobile devices, the Auto layout will automatically convert to a mobile-optimized layout, with swipeable input fields below the preview.

The Stacked layout can be used for templates with only a few input fields (like a profile picture generator that only has an image input field). It displays the preview at the top, the input fields stacked below, and a download button at the bottom. The Stacked layout allows you to embed your widget in a very compact form on your website.

Background Color

The Background Color sets the color theme of your widget.

Pan & Zoom

If you keep Pan & Zoom enabled, the user will be able to pan and zoom in the preview of the design. If you disable it, the preview will be fixed.

Page Title

The page title is the title displayed in the tab of the browser when the widget URL is opened.

Favicon

The favicon is displayed in the browser tab when the widget URL is opened.

How to disable the Bluepic Branding

The Bluepic branding is enabled by default on all widgets. You can disable the branding only if you have purchased Widget credits at full price. We incentivize keeping the branding enabled by offering a discount on Widget credits, which, when used, prohibits you from disabling the branding.

Export actions (Webhooks, Redirects, custom Download button)

The default export action is a PNG download. You can configure different export actions, or even give the user multiple options. To begin, switch to the 'Export actions' tab in the widget settings panel and create a new export action.

Output file

Options for the Output File are:

PNG (default)
JPEG
SVG
PDF
None (No image is rendered)

Label

You can edit the label text of the Download button to something like 'Submit' or 'Done', or translate it into your own language. If you create multiple export actions, the main button will have the label 'Export', with each individual action visible on hover.

Download file

This setting toggles whether or not users can download the rendered image directly. You can disable the 'Download file' option and only use a Webhook and/or Redirect instead.

Webhook

You can send a webhook to your own web service to further process the data or store the rendered image. For more information on how webhooks work, visit the webhook guide.

Redirect

You can redirect users to a different page after they click the button.

Success Message

Set a message to be displayed after the user clicks the button.