The Popup component allows you to create interactive buttons that display various types of content such as images, videos, text boxes, or PDFs when clicked. This feature is ideal for showing important documents (e.g., contracts or order forms), media (arena renderings, recap videos), or additional information without navigating away from the current page.
Step 1: Add the Popup Component
Open the Component Store: Begin by accessing the component store and search for the “Popup Component” and add it to your slide
Step 2: Configure the Popup Settings
Access Popup Settings: Click on the popup component to access the settings located at the top-left corner of the screen.
Select Popup Content: In the settings menu, choose the type of content you’d like the popup to display. Options include:
Image
Video
Text Box
PDF Document
Step 3: Upload Your Image, Video, or Document
Go to the File Library: Navigate to the file library where your documents are stored. Select the image, video, or document you would like the popup component to display.
Step 4: Customize the Button
Choose Button Type: Under the button settings, you can select the type of button that will trigger the popup. You have the following options:
Text Button
Icon Button (choose from the icon gallery)
Upload Your Own Image as a button
Optional: Add Text Area: If you want to include a text area (like a description or instructions) alongside the popup, check the box next to Text Area in the settings
Step 5: Adjust Button Styling
Modify Button Appearance: Go to the styling options for the button and adjust its look. Styling options include:
Background Color: Set the background color to your preferred color
Text Color: Change the text color to a contrasting color for readability
Hover Color: Enable a color to appear when hovering over the button
Step 6: Preview the Popup
Preview the Popup: At the top-left of the settings panel, click Show Popup to see how the popup will appear in its full-screen view. The recipient can also exit the popup and return to the main page by clicking the X icon.
Preview Directly in Edit Mode: You can click directly on the button in edit mode to preview the popup without exiting the current view.
Step 7: Final Adjustments and Save
Make Final Adjustments: If needed, fine-tune the layout, button styling, or content in the popup to ensure it meets your design needs.
Save Your Changes: Once you’re satisfied with the setup, save your work to make the popup live.
The Popup component is a simple yet powerful way to enhance user interactivity on your page by allowing you to display content like PDFs, images, or videos in a sleek and engaging manner. Whether you’re sharing documents or adding dynamic visual elements, the Popup component can improve the user experience without disrupting the flow of your page.