← Campaigns

Create a widget campaign: embed the design generator in your website

Last updated October 22, 2026

In Studio, a widget campaign gives you a design generator that you embed in your own website. Visitors to your website pick a template there, fill it in and export their design without leaving your page.

This takes five steps:

  1. Create the widget campaign under Campaigns.
  2. Choose the templates.
  3. Design the design generator.
  4. Copy the code and paste it into your website.
  5. Test the design generator on your website.

Create the widget campaign

  1. Click Campaigns in the Studio navigation. The overview of your campaigns opens.
  2. Click Create Campaign. If you have no campaign yet, it is the Create campaign card. A popup opens.
    Create Campaign can't be clicked?

    A campaign needs at least one template. Create a template first.


    Create Campaign popup with the types Web, Widget and Team, Web selected.
  3. Click the Widget card. It is now selected.
  4. Click Create. The widget campaign is now created and online. It opens at the Templates step. At the top you see all steps: Templates, Generator Theme, Social Connections, Share and Analytics.

You can also start in the template editor: click Share at the top right of the toolbar and then Create campaign. The template is then already in the campaign, and it opens straight at the Generator Theme step.

Choose the templates

The Templates step shows your templates, sorted by folder. Bluepic saves every change to the campaign automatically.

  1. Tick the card of every template visitors should get. Select all selects all templates of a folder.
    A template is missing from the list?

    Templates in Drafts, Archive and Presets don't show here. Move the template into another folder first.

  2. Click Next at the top. The Generator Theme step opens.
    Generator Theme step of a widget campaign: the steps at the top, the settings on the left and the preview of the design generator on the right.

Design the design generator

In the Generator Theme step you decide what the design generator looks like on your website. A preview is on the right.

  1. Set colors, fonts and the Layout on the left. The preview shows right away how visitors see the design generator.
  2. Click Next. The Social Connections step opens.
  3. Switch on every way visitors may export their design, for example Download or LinkedIn.
  4. Click Next. The Share step opens.

Embed the code in your website

The Share step has the code that embeds the design generator in your website. The Embed tab is already open.

  1. Look at which code snippets the Embed tab shows. It depends on how many templates the campaign has:
    • With one template:
      • At the top the script snippet. It starts with <!-- Stylesheet for BLUEPIC.
      • Below it the iframe snippet. It starts with <iframe.
    • With several templates:
      • Only the iframe snippet. It shows all templates.
  2. Click Copy at the top right of the snippet you want. The code is now on your clipboard.
    Share step of a widget campaign with the Embed tab: the iframe snippet and the Copy button.
  3. Paste the code into your website's HTML where the design generator should appear.
  4. Change the width and height in the code. Both snippets come with a fixed size of 800 × 600 pixels (width: 800px and height: 600px). The design generator now fits the space on your page.

Test the design generator on your website

The campaign has been online since you created it. So the design generator shows up on your website right away.

  1. Click the Preview tab in the Share step. You see the design generator the way visitors see it.
    Share step of a widget campaign with the Preview tab open: the design generator as visitors see it.
  2. Open the page of your website where you pasted the code. The design generator appears in that spot.
    The design generator doesn't load?

    The campaign is offline, or its address has changed. If the Share step shows the Make live button, click it. If you changed the address, copy the iframe snippet again and replace it on your website.

  3. Fill in the design generator the way visitors would.
    Continue with LinkedIn can't be clicked?

    In an embedded design generator, signing in with LinkedIn isn't available. To pre-fill from LinkedIn, share the campaign's link.

  4. Test every input field and the export, on a phone too.
  5. Click Next in Studio. The Analytics step opens. This is where you later see how visitors use the design generator.
  6. Click Finish. You get back to the overview of your campaigns.

Change the address or take it offline

The widget campaign also has a link of its own. It opens the design generator without your website. You manage it in the Share step:

  • Copy URL copies the link to your clipboard.
  • Edit URL makes the address editable. Type the new address after the slash and click Save. You choose a custom domain in the dropdown in front of it. Custom domains are an Enterprise feature. Without it, the tooltip on the dropdown says "Custom domains are an Enterprise feature."
  • Delete URL takes the campaign offline. The design generator then no longer loads on your website either. The preview shows "Widget has no URL".
  • Make live, or Create URL in the preview, puts the campaign back online.