--- title: "Design a popup and its teaser" description: "Choose the popup type, style the popup, backdrop and close button, and add a teaser that invites visitors to open it." url: https://scratcher.io/help/sharing/popup-design-and-teaser language: en --- 1. [Help center](https://scratcher.io/help) 2. [Publishing and sharing](https://scratcher.io/help/sharing) 3. Design a popup and its teaser # Design a popup and its teaser Choose the popup type, style the popup, backdrop and close button, and add a teaser that invites visitors to open it. A popup campaign has two parts: the popup itself, and an optional teaser. The teaser is a small banner on your site, such as "Spin to win 🎁", that opens the popup when clicked. ## Style the popup 1. Click **Popup settings** above the page, or click the popup's edge. 2. On the **Styles** tab, under **Popup**, set the **Background**, the **Backdrop** (the dimmed layer behind the popup), **Border**, **Size**, **Shape**, **Content alignment** and **Margin**. Turn on **Disable backdrop** if the page behind the popup should not be dimmed. 3. Under **Close button**, set its **Background**, **Icon** color, **Size**, corner (**Alignment**) and **Margin**. 4. On the **Effects** tab, choose how the popup opens and closes, for example **Fade** or **Slide**. The popup add-ons: - **Dismiss teaser on close**: "Also hide the teaser when this popup is closed." - **Hide after form submit**: "Don't show this popup again to a visitor once they have submitted a form inside it." ## Popup type and position Open **Placement** under **Layout** in the editor: - **Type**: a bar at the top or bottom of the screen, a standard popup, a slider at the side, or a full page. If a type is greyed out, your plan doesn't include it. - **Alignment**: bars can be at the top or bottom, sliders on the left or right, and standard popups anywhere on a 3 × 3 grid. The first time you open a new popup, Scratcher asks you to **Choose domain**: the website where it will be shown. You can change it later under **Domain**. See [Show a campaign as a popup](https://scratcher.io/help/sharing/show-a-campaign-as-a-popup). ## The teaser Under **Flow**, the **Teaser** row shows the teaser. Its **Actions** menu has: - **Enable teaser** and **Disable teaser**. A disabled teaser says **Teaser is disabled**. - **Change teaser**: pick another teaser design. - **Settings**: the teaser's own settings (see below). - **Save teaser as template**: reuse the teaser in other popups. Design the teaser like a page: click its texts and images to change them. ## Teaser settings - **Action**: what happens when the teaser is clicked: **Show popup**, **Link** (with **Open link in new tab** if you want) or **None**. - **Hide on desktop**, **Hide on tablet**, **Hide on mobile**. - **Styles**: the teaser's **Background**, **Border**, **Size**, **Shape**, **Content alignment**, corner (**Alignment**) and **Margin**, and its own **Close button**. The teaser shows as soon as the page loads. The triggers in **Display** only apply to the popup. When a visitor closes the teaser with its close button, it stays hidden for that visitor. ## Background image in popups Popups have an **Image Background** element that fills one side of the popup with an image. Set its **Mobile height** to control how much of the screen it takes on phones. ## Open a popup from your own button With the trigger add-on **Click trigger** in **Display**, the popup opens when someone clicks an element on your website. Enter the element's CSS **Selector**, for example `.open-competition`. Ask your web developer if you are unsure. ## Tips - Keep the popup short: a headline, the game and the form. Visitors decide in seconds. - Test the popup and teaser on a phone. Use **Hide on mobile** for a teaser that takes too much room there. - A full-page popup gets the most attention, but use it with care, for example with **Exit-intent** on computers. Publishing and sharing - [Share your campaign link and QR code](https://scratcher.io/help/sharing/share-your-campaign-link) - [Share a campaign on social media](https://scratcher.io/help/sharing/share-on-social-media) - [Embed a campaign on your website](https://scratcher.io/help/sharing/embed-on-your-website) - [Show a campaign as a popup](https://scratcher.io/help/sharing/show-a-campaign-as-a-popup) - [Design a popup and its teaser](https://scratcher.io/help/sharing/popup-design-and-teaser) - [Choose your campaign's web address](https://scratcher.io/help/sharing/campaign-url-and-own-domain) - [Send emails from your own domain](https://scratcher.io/help/sharing/email-sending-domain) - [Rotate campaigns with campaign schedules](https://scratcher.io/help/sharing/campaign-schedules) ## Related articles - [How element settings work](https://scratcher.io/help/elements/element-settings-basics): The Content, Styles, Settings and Effects tabs, sizes, shapes, borders, colors and backgrounds, mobile changes and add-ons. - [Embed a campaign on your website](https://scratcher.io/help/sharing/embed-on-your-website): Put a campaign inside a page on your website with the embed script or an iframe, check that it works, and fix common problems. - [Show a campaign as a popup](https://scratcher.io/help/sharing/show-a-campaign-as-a-popup): Install the script once, choose the popup type, and decide on which pages, when, how often and for whom it shows. ## Still need help? Real people are here to help. If you already use Scratcher, the quickest way is the chat inside the platform. - **[Chat with us](https://platform.scratcher.io/login)** Log in and click the chat button in the bottom-right corner. Rex answers right away, and our team is a click away. - **[Book a meeting](https://scratcher.io/book-a-meeting)** A free 30-minute video call with our team: a tour, campaign ideas or help with your setup. - **[Email us](mailto:contact@scratcher.io)** Write to contact@scratcher.io and we will get back to you.