← Campaigns

Widget-Campaign erstellen: Design-Generator in deine Website einbetten

Zuletzt aktualisiert 22. Oktober 2026

Im Studio erstellst du mit einer Widget-Campaign einen Design-Generator, den du in deine eigene Website einbettest. Besucher deiner Website wählen dort ein Template aus, füllen es aus und exportieren ihr Design, ohne deine Seite zu verlassen.

Das geht in fünf Schritten:

  1. Erstelle die Widget-Campaign unter Campaigns.
  2. Wähle die Templates aus.
  3. Gestalte den Design-Generator.
  4. Kopiere den Code und füge ihn in deine Website ein.
  5. Teste den Design-Generator auf deiner Website.

Widget-Campaign erstellen

  1. Klicke in der Navigation des Studios auf Campaigns. Die Übersicht deiner Campaigns öffnet sich.
  2. Klicke auf Create Campaign. Hast du noch keine Campaign, ist es die Karte Create campaign. Ein Popup öffnet sich.
    Create Campaign lässt sich nicht anklicken?

    Eine Campaign braucht mindestens ein Template. Erstelle zuerst ein Template.


    Popup Create Campaign mit den Arten Web, Widget und Team, Web ausgewählt.
  3. Klicke auf die Karte Widget. Sie ist jetzt ausgewählt.
  4. Klicke auf Create. Die Widget-Campaign ist jetzt erstellt und online. Sie öffnet sich beim Schritt Templates. Oben siehst du alle Schritte: Templates, Generator Theme, Social Connections, Share und Analytics.

Du kannst auch im Template-Editor starten: Klicke oben rechts in der Toolbar auf Share und dann auf Create campaign. Das Template ist dann schon in der Campaign, und sie öffnet sich gleich beim Schritt Generator Theme.

Templates auswählen

Im Schritt Templates siehst du deine Templates, sortiert nach Ordnern. Alle Änderungen an der Campaign speichert Bluepic automatisch.

  1. Setze das Häkchen auf der Karte jedes Templates, das Besucher bekommen sollen. Mit Select all wählst du alle Templates eines Ordners aus.
    Ein Template fehlt in der Liste?

    Templates in Drafts, Archive und Presets erscheinen hier nicht. Verschiebe das Template zuerst in einen anderen Ordner.

  2. Klicke oben auf Next. Der Schritt Generator Theme öffnet sich.
    Schritt Generator Theme einer Widget-Campaign: oben die Schritte, links die Einstellungen, rechts die Vorschau des Design-Generators.

Design-Generator gestalten

Im Schritt Generator Theme legst du fest, wie der Design-Generator auf deiner Website aussieht. Rechts siehst du eine Vorschau.

  1. Stelle links Farben, Schriften und das Layout ein. Die Vorschau zeigt sofort, wie Besucher den Design-Generator sehen.
  2. Klicke auf Next. Der Schritt Social Connections öffnet sich.
  3. Schalte den Schalter bei jedem Weg ein, auf dem Besucher ihr Design exportieren dürfen, zum Beispiel Download oder LinkedIn.
  4. Klicke auf Next. Der Schritt Share öffnet sich.

Code in deine Website einbetten

Im Schritt Share steht der Code, mit dem du den Design-Generator in deine Website einbettest. Der Tab Embed ist schon geöffnet.

  1. Schau, welche Code-Schnipsel der Tab Embed zeigt. Das hängt davon ab, wie viele Templates die Campaign hat:
    • Mit einem Template:
      • Oben der Script-Schnipsel. Er beginnt mit <!-- Stylesheet for BLUEPIC.
      • Darunter der iframe-Schnipsel. Er beginnt mit <iframe.
    • Mit mehreren Templates:
      • Nur der iframe-Schnipsel. Er zeigt alle Templates.
  2. Klicke beim Schnipsel deiner Wahl rechts oben auf Copy. Der Code ist jetzt in deiner Zwischenablage.
    Schritt Share einer Widget-Campaign mit dem Tab Embed: der iframe-Schnipsel und der Button Copy.
  3. Füge den Code im HTML deiner Website dort ein, wo der Design-Generator erscheinen soll.
  4. Ändere im Code Breite und Höhe. Beide Schnipsel haben eine feste Größe von 800 × 600 Pixeln (width: 800px und height: 600px). Der Design-Generator passt jetzt in den Platz auf deiner Seite.

Design-Generator auf deiner Website testen

Die Campaign ist seit dem Erstellen online. Der Design-Generator erscheint also sofort auf deiner Website.

  1. Klicke im Schritt Share auf den Tab Preview. Du siehst den Design-Generator so, wie Besucher ihn sehen.
    Schritt Share einer Widget-Campaign mit geöffnetem Tab Preview: der Design-Generator, wie Besucher ihn sehen.
  2. Öffne die Seite deiner Website, in die du den Code eingefügt hast. Der Design-Generator erscheint an dieser Stelle.
    Der Design-Generator lädt nicht?

    Die Campaign ist offline, oder ihre Adresse hat sich geändert. Steht im Schritt Share der Button Make live, klicke darauf. Hast du die Adresse geändert, kopiere den iframe-Schnipsel neu und ersetze ihn auf deiner Website.

  3. Fülle den Design-Generator so aus, wie es Besucher tun würden.
    Continue with LinkedIn lässt sich nicht anklicken?

    Im eingebetteten Design-Generator gibt es die Anmeldung mit LinkedIn nicht. Teile für das Vorausfüllen mit LinkedIn den Link der Campaign.

  4. Teste jedes Input-Feld und den Export, auch auf dem Smartphone.
  5. Klicke im Studio auf Next. Der Schritt Analytics öffnet sich. Hier siehst du später, wie Besucher den Design-Generator nutzen.
  6. Klicke auf Finish. Du kommst zurück zur Übersicht deiner Campaigns.

Adresse ändern oder offline nehmen

Die Widget-Campaign hat auch einen eigenen Link. Unter ihm öffnet sich der Design-Generator ohne deine Website. Im Schritt Share verwaltest du ihn:

  • Copy URL kopiert den Link in deine Zwischenablage.
  • Edit URL macht die Adresse änderbar. Gib nach dem Schrägstrich die neue Adresse ein und klicke auf Save. Eine eigene Domain wählst du im Dropdown davor. Eigene Domains sind eine Enterprise-Funktion. Ohne sie zeigt der Tooltip am Dropdown den Hinweis „Custom domains are an Enterprise feature.“
  • Delete URL nimmt die Campaign offline. Der Design-Generator ist dann auch auf deiner Website nicht mehr erreichbar. Die Vorschau zeigt „Widget has no URL“.
  • Make live oder Create URL in der Vorschau schaltet die Campaign wieder online.