System updates

We’re experiencing issues that may affect your Square services. We’ll continue to update our status page with more information.

Home>Site and eCommerce Setup

Add a Pop-up or Banner to Your Website

Pop-ups are a great way to catch the attention of your visitors - use them to make an announcement, verify the age of website visitors, offer a coupon to new signups, or simply build up your mailing list. You can create an email collection pop-up for free, but you’ll need to upgrade to use other pop-up types.

popups-dashboard-main

Create a Pop-up

To create a pop-up:

  1. Go to the Square Online Overview page.

  2. Click Communications > Pop-ups.

  3. Select the type of pop-up you want to use.

  4. In the Layout section, click on a thumbnail to view an example.

  5. Edit the pop-up, Style and Content, and Settings to best fit the needs of your business.

  6. Click the Publish button to enable the pop-up on your live website.

Choose your Pop-up

Pop-up Description
Collect emails Collect email addresses from your customer to add them to your mailing list.
Offer a coupon Create a coupon before before adding a coupon pop-up.
Make an announcement Share important news or updates.
Verify age Prevent minors from accessing your site.
cms-popups-style

Note: Settings will vary depending on which style of pop-up you’re creating.

Style and Content

Once you’ve decided on a layout, you can edit additional settings to customize the pop-up for your needs. Settings available will vary depending on which style of pop-up you’re creating. You can use the buttons at the top to see how it displays on mobile and check out the confirmation message.

Title and Text : Customize the color, style, and content of the display text and confirmation message. Form Fields : Customise the placeholder text and style of the form fields and toggle the Name and Birthday fields on or off. Action Buttons : Customize the behavior and style of the primary button and close icon. The action button can be set to an email address or phone number. Alternatively, you can set it to open a page on your website or an external website. Background : Set a background color for your pop-up and upload an image for layouts that include one. {: .accordion}

Settings

cms-popups-settings

Use the Settings tab at the top left of the editor to configure the pop-up behaviour. Settings available will vary depending on which style of pop-up you’re creating. The following options can be adjusted here:

Pop-up Name

An internal name for your pop-up (eg, lead generation form).

Timing

Configure which actions will trigger the pop-up for visitors.

Display Frequency

Decide how often to display the pop-up for returning visitors.

Stopping Conditions

Choose when to permanently stop displaying the pop-up based on the visitor’s actions.

Schedule

Select a timeframe for the pop-up. This is handy if you want to offer a limited-time discount to new signups, for example.

Email Notifications

Check the box here to enter your email address and specify how often you want to be notified of new submissions. You can choose from immediately, once daily, once weekly, or once a month.

Embed Code

Copy the code here to manually insert it into a webpage.

When you’re finished setting up your pop-up, click the publish button to make it appear on your live website.

Managing Pop-ups

popups-dashboard-saved

To view and manage any pop-ups you’ve created:

  1. Go to the Square Online Overview page.

  2. Choose Communications > Pop-ups.

  3. Click the . . . icon > Edit to make changes to the settings. This will load the pop-up preview.

  4. Click the Publish button to update the pop-up on your live website.

Note: The pop-up will be temporarily disabled during editing, and you’ll need to publish your site again after making changes.

Can't find what you need?