Pop up widgets

A pop-up is a small, interactive window that appears on your webpage, either automatically or after clicking a button. Pop-ups are used to grab your user's attention for marketing (newsletter sign-ups, offers), instruction (video guides), or navigation.

What a pop up can be used for

Pop-ups are used to display messages, forms or other content in a pop-up window, such as Sign up for our newsletter or Entries close soon but can be used to display any content you wish. 

You can:

• Embed another page in the pop-up widget e.g. a page containing a webform
• Add content when creating the widget e.g. text, images, download links

A pop-up can be added to any page or template and can be triggered:

• Upon loading the page. You can also choose for the pop-up to be triggered after a certain amount of page loads e.g. triggered every 5 page loads
• When a button is clicked
• Both

Adding a pop-up

To get started, go to Website > Pages, and select the specific page that you want your pop-up to appear on.

Once on your desired page, select the section of your webpage the pop-up will originate from.

To add your pop-up, click on +Add Content, and go to Widgets > +Add Pop-Up.

In the new window, select the type of pop-up you wish to add.

Complete the configuration of your selected pop-up type, and click Save.

Then, click +Add Selected to add your newly created pop-up to your page.

Creating a standard pop up

After choosing Standard as your pop-up type, first select the position your pop-up will appear on your page. Whether you choose for the pop-up to appear automatically or by clicking a button, the position you choose will determine where the pop-up opens.

Next, add a title and choose if you wish to display the title. If yes, select how you would like the title to be aligned.

Then, add the content you want to display in the pop-up.

Then, select what size you would like your pop-up to be.

The size will determine the maximum width of the pop-up window. Select a size which best suits your pop-up content.

Next, choose how your pop-up will open.

• If you would like the pop-up to be opened using a button, tick the option Add button to open popup?, and add button text, i.e. what the button will be called.
• If you would like the pop-up to appear automatically when a user loads the page, select Open popup automatically?.

If you prefer that your automatic pop-up not appear immediately upon loading the page, you can add in a delay by inserting a seconds value in the field Auto popup delay.

If you want the pop-up to appear every time a user visits the page it is on, the Auto popup frequency option can remain at the default option of 1.

Otherwise you can determine how often the popup will appear, e.g. once every 5 time the page is loaded.

To embed a page into the pop-up,  tick the box Embed page in popup?.  

Select the page you would like to be added. If adding a page on your Evessio site, click in the space titled Page to embed, and choose from the list of your existing pages. The header and footer of your chosen page will be removed; only the body of the page will be shown in the pop-up.

If adding a page outside of your Evessio site. select the option Use external URL?, and insert the address of the page you wish to embed.

Finally, to add a link button, i.e. call to action button, click +New Link button. Add the button text, select or provide the link it should go to, and click Save.

If you want to add a button that you've already created, click Re-use other links, and select it from the list. You can add multiple buttons, and drag and drop them into the order you want them to appear.

When your pop-up has been configured, click Save.

Creating a video pop up

After choosing Video as your pop-up type, first select the position your pop-up will appear on your page. Whether you choose for the video pop-up to appear automatically or by clicking a button, the position you choose will determine where the video pop-up opens.

Next, add a title and choose if you wish to display the title. If so, select how you would like the title to be aligned. Then, optionally add content you want to display in addition to your video in the pop-up.

Next, choose the width of your video pop-up, both in its minimised and expanded state.

Next, choose how your video pop-up will open.

• If you would like the pop-up to be opened using a button, tick the option Add button to open popup?, and add button text, i.e. what the button will be called.
• If you would like your minimised video to display a call to action (CTA) banner to provide guidance to your user, tick Add Call To Action banner on minimised popup?, and add the CTA banner text.
• If you would like the pop-up to appear automatically when a user loads the page, select Open popup automatically?.

If you prefer that your automatic pop-up not appear immediately upon loading the page, you can add in a delay by inserting a seconds value in the field Auto popup delay.

If you want the pop-up to appear every time a user visits the page it is on, the Auto popup frequency option can remain at the default option of 1.

Otherwise you can determine how often the popup will appear, e.g. once every 5 time the page is loaded.

Then, add the video you wish to play inside your video pop-up. You can add either a YouTube or Vimeo video.

To complete your video selection setup, choose the height for your video pop-up.

You can choose to define your video pop-up height by using % (percentage of the pop-up width chosen above), or pixels. The following percentage values are recommended:

Finally, to add a link button, i.e. call to action button, click +New Link button. Add the button text, select or provide the link it should go to, and click Save.

If you want to add a button that you've already created, click Re-use other links, and select it from the list. You can add multiple buttons, and drag and drop them into the order you want them to appear.

When your video pop-up has been configured, click Save.