How do I add a pop-up to my Composer 2 website?

Adding a pop-up to your website is a simple and effective way to promote key event information as visitors land on and begin navigating your site.

Pop-ups can include:

• Text-based announcements

• Images or videos

• Sign-up or registration forms for data capture

All of these help drive engagement and increase visibility for important content.

Before you start: Pop-up panels

To create an entry pop-up on a Composer 2 website, you’ll need a Pop-up Panel.

• This panel is usually included by default as part of the initial website build (set to inactive)

• If it’s not already available, you can create one by following this guide:
  https://support.asp.events/hc/en-us/articles/32899660701981-Understanding-Panel-Positions-in-Composer-2

How to set up an entry pop-up

Once the pop-up panel is available, follow the steps below.

Access the pop-up panel

Navigate to the pop-up panel within the relevant site/back office.

Name the panel

Give the panel a clear, descriptive name for easy reference in the CMS.
This name is not displayed on the website.

Choose a pop-up style

Select one of the available pop-up styles. Each style has a different layout and format.
You can preview them on our demo site:

• https://composer.showoff.asp.events/panels/popup/popup-style-1

• https://composer.showoff.asp.events/panels/popup/popup-style-2

• https://composer.showoff.asp.events/panels/popup/popup-style-3

Adding content to your pop-up

Images

Within the Content tab:

• Select an image from the Media Manager

• Add appropriate alt text for accessibility

Recommended image guidelines:

• Dimensions between 700 × 500px and 800 × 600px

• File size ideally under 100KB for optimal performance

As this pop-up is often the first thing visitors see, make sure imagery is well optimised.

Header and body text

• Use the Header tab to add the pop-up title (this is shown on the front end)

• Use the Body field for descriptive text, CTAs, or embedded forms

Styling

Within the Content tab, you can customise:

• Text colours

• Font families

• Font sizes

• Text casing

This applies to both the header and body content.

Pop-up settings

In the Settings tab, you’ll find the General settings.

Background

Choose a background style:

• Solid colour

• Gradient

• Pattern (repeating graphic or icon)

Display frequency

The Expires (in days) setting controls how long before the same user sees the pop-up again.
This is based on browser cookies.

If cookies are cleared or the site is viewed in incognito mode, the pop-up may appear again.

Display delay

The Delay (in seconds) setting controls how long after page load the pop-up appears.

Best practice:

• 5–15 seconds is recommended

• Shorter delays can feel intrusive

• Longer delays may mean users navigate away before seeing it

Publishing your pop-up

Once everything is configured:

• Save the panel

• Activate it — and your pop-up will go live

Key notes and best practices

• Always set expiry and delay values for the best user experience

• Carefully proofread all content, as this is often the first thing visitors see

• Optimise all images and videos to avoid performance or loading issues

• Use panel restrictions to show different pop-ups on different pages:
  https://support.asp.events/hc/en-us/articles/360013894691-How-To-Restrict-Panels-to-Certain-Pages

• Use publishing dates and times to schedule pop-ups in advance:
  https://support.asp.events/hc/en-us/articles/31436325103773-Scheduling-Content-with-Publishing-Dates

• Exit pop-ups can also be used instead of entry pop-ups:
  https://support.asp.events/hc/en-us/articles/33223382600861-How-do-I-add-an-exit-pop-up-to-my-website