Adding an overlay

What is an overlay?

An overlay is a pop-up window that appears over your action’s thank you page or a stand alone share page containing an additional ask for the user. It can contain some text, buttons, and/or the form from another action.

This is a useful feature if you want to offer your supporters more than one thing to do after taking one of your actions. For example you could ask them if they would like to donate before asking them to share the action with their friends and family. Or you could ask if they would like to complete a short survey before asking them for a donation.

By adding buttons to the overlay you can also force a choice, for example would they like to share their experiences of the issue you’re campaigning on, yes or no? Presenting asks in this way can lead to increased engagement from your supporters.

Getting started with overlays

Your overlay will have some simple styling, with the content matching the current styles you have set up for your Impact Stack. If you would like to make some small changes to its styling, such as the changing the background colour, you can get in touch with the support team who will be happy to do this as part of your support hours.

Larger changes or a new design would need to be done as a separate billable project, and could either be done as part of a complete page template design or as smaller standalone project, let the support team know what you're looking for and they'll be able to advise the best next steps.

Note that setting up some elements of the overlay does require using and editing some HTML.

If you have an older installation of Impact Stack, you may need to have the functionality turned on. To request this please email our support team at support@more-onion.com who will be happy to help.

How to add an overlay to your thank you page

In your action, go to the Thank you step and select Create new thank you page.

Scroll to the bottom of the page and you will see the overlay options just below the share options. Click on the + icon to open the options menu.

Toggle the button to ‘On’ to switch on the overlay for your action.

If you just want text, links or buttons in your overlay, add it to the Introduction section and save the page.

So the following:

Will look like this:

Note that the overlay features a ‘x’ close button in the top right.

If you would like to add buttons, you will need to edit and add some HTML.

If you want to add two buttons, where one takes the user to another page, and the other closes the overlay (for example, Yes and No buttons), click on source and then add the following:

For a button to go to another page (e.g. Yes):

<div>
	<a
		class="button outline"
		href="add your link here"
		>add your button name here</a
	>
</div>

For a button to close the overlay (e.g. No):

<div>
	<a
		aria-label="Close overlay"
		class="button primary"
		data-close=""
		href="#"
		>add your button name for closing the overlay button here</a
	>
</div>

So the following:

Will look like this:

If you would like to add the form from another action instead, you can select it from the Content drop down below the Introduction section.

So this:

Will look like this: