Skip to main content
Set up Pop-Ups

How to link pop-ups to buttons.

Chris Scott avatar
Written by Chris Scott
Updated over a week ago

Add interactive elements to your Storyline with pop-ups. We'll walk you through how to set up each type and link them to buttons, files, or URLs.

1. Navigate to https://app.digiphy.it/storylines/new or any existing Storyline in your account.

2. Find the edit settings for your button or link and click "Pop-up" in the "Link to" settings. Popups can be initiated from any module with a button or links. In some modules images, and carousel cards can also have links and trigger popups.

Page builder edit settings selecting popup link

3. If there is not currently a popup on this page, your link settings will prompt you to "Create pop-up". Click it.

Page builder module settings detail of link options selecting popup

4. This will open the module library. Please select a module from the "Pop-ups" section. In this example we'll select "Modal Window".

Module library detail of popup module

5. Add the popup module to your page.

Module library detail of selecting a modal window

6. Note that now, next to "Home" in the top left corner of the screen there is a new area called "Modal window". These special modules live above your page. You have as many popup modules as you would like. Click it to see the new module.

Page builder showing how to view a popup on page

7. This is what we will connect to your original button.

Page builder of popup

8. Click "Home" to go back to your main page.

Page builder showing how to select home level

9. Back in your link settings, in "Pop-up" you'll see the new modal window as an option. Select it, and your link is now connected to the popup.

Page builder module settings showing how to select a modal window from a popup link type

10. You're now connected.

Module settings popup link type selecting a modal window popup

11. To see your popup working, click "Preview". A new browser window will open to display your page.

Page builder showing detail of page preview

12. Click the button connected to the new popup.

Page preview detail of clicking a button with a popup link type

13. Here you can see that the popup has successfully opened.

Page preview showing detail of a popup opening


โ€‹

Did this answer your question?