Skip to main content

Browse guides

Open the full guide library for quick switching.
Getting Started 7 min read Updated April 10, 2026

Getting Started with the Widget

Show the exact first-run path from a blank image prompt to a finished branded launch graphic.

The ImageLayer widget open in image mode on the generate page

Use this guide when someone asks, “What does a strong first widget session actually look like?” It walks through one clean image flow from blank state to a finished branded asset using the exact controls shown in the screenshots.

What you’ll learn

  • How to reset the widget to a clean first-run image session
  • Which literal prompt to use for a polished first demo
  • How to explain preview using the exact action labels the user sees
  • How the built-in branding editor turns a raw image into a finished launch asset

Before you start

  • Log in to your ImageLayer organization
  • Open Generate
  • Stay in Image mode with General selected
  • Keep LinkedIn Post (4:5) selected in Platform preset
  • Keep an optional light frame overlay or logo file ready if you want to demonstrate extra branding controls after the first preview
01 Open the flow

Start from a clean Image session with the 4:5 preset already in place

Open /dashboard/generate/ and reset the widget before you narrate anything else.

  • Confirm Image is active in the mode selector.
  • Keep General selected in the content-type tabs.
  • Leave the main prompt box empty.
  • Leave the Try a prompt chips untouched for this walkthrough.
  • Keep Sketch and References closed for this first walkthrough.
  • Keep Platform preset on LinkedIn Post (4:5).

Expected result

You are looking at the same first-run state a new operator will see: empty prompt, suggestion chips visible, and the portrait preset ready for the launch graphic.

The widget open in image mode before a prompt is entered
This blank state already shows the current prompt suggestions, keeps Sketch and References collapsed, and leaves the 4:5 platform preset ready below the textarea.
02 Generate the first asset

Paste one polished prompt and run it without extra inputs

Paste this exact prompt into the main textarea:

Create a 4:5 launch graphic for a new AI design tool. Soft cream background, lavender-to-blue gradient bloom, refined editorial style, clean centered composition, and enough empty space for a short headline.
  • Do not upload references for this first run.
  • Do not open Sketch.
  • Keep Platform preset on LinkedIn Post (4:5).
  • Keep the image model shown in the screenshot selected.
  • Click Generate.

Expected result

The widget submits one clean image request and moves into generation without any extra steering controls.

The widget with a typed image prompt ready to submit
The first demo works best when the brief is literal, visually specific, and still easy to explain live.
03 Review

Use preview the way a real end user would

Once the result appears, narrate the decision using the exact buttons in the footer instead of speaking in generalities.

  • Use Generate again when the composition is close but the draft is not strong enough.
  • Use Edit prompt when the brief itself needs to change.
  • Use Save if the raw image is already good enough on its own.
  • Use Brand it when the image is approved and ready for finishing.

Expected result

The operator can either refine the request, accept the raw image, or move directly into finishing.

The widget preview state showing the generated image
Preview is where the workflow stops feeling like a prompt box and starts feeling like a product.
04 Finish the asset

Open the branding editor, review the poster, and finalize it

After clicking Brand it, keep the walkthrough literal to the controls visible in this state instead of describing a different finishing setup.

  • Click Brand it from preview to move into the editor.
  • Review the poster on the canvas and confirm the composition is strong enough to keep.
  • If you want to demonstrate extra finishing controls, click Upload PNG / SVG or Upload logo after the first pass.
  • Use Back to preview if you want to return to the raw image before finalizing.
  • Click Finalize or Download.

Expected result

The session ends with the same launch poster shown in the editor preview, ready to download immediately.

Final sample output

Sample generated output
The same launch poster shown in the branding editor preview

This saved result comes from the same editor state shown above, so the reader can inspect the exact poster they just saw in the widget.

The branding editor showing the accepted launch poster before finalizing
The accepted poster stays inside the same widget session, so the operator can review it in the branding editor before downloading.

What controls this experience

  • Output mode selection in the widget header
  • Prompt input and Generate in the main image workflow
  • Preview actions: Brand it, Save, Generate again, and Edit prompt
  • Branding editor controls for Layout overlay, Opacity, Upload logo, Size, and Position

Next guide

Image Generation: Prompts, References, and Presets

Run the full freeform image workflow with a concrete prompt, optional helper inputs, and a real final result.