Take full advantage of linking to a website without taking your visitors away from your document. With an iFrame you can display external websites in a pop-up box; for example, a page from your company website, an upcoming event or even another PageTiger document or resource.
How to add an iFrame in pop-up
Navigate to a Document.
Select ‘Interactivity’ for the Version of the Document that you want to work on.
The Version will then open in Interactivity mode and the Interactivity palette can be found to the right of your page.
Select the ‘Media’ module type from the ‘Add Interactivity' palette.
Select the ‘iFrame in pop-up’ option.
Click and drag out the area to add to your page - this is the clickable area that the visitor will select to view the iFrame in a pop-up box.
Paste in the URL of the website that you would like to display in the pop-up box.
Different websites handle embedding into iFrames differently - while some might display, others will choose to disable the feature, preventing them from being iFramed.
For security reasons, the URL entered into an iFrame may open in a new tab if the link used does not start with https.
An iFrame behaves differently on mobile and tablet devices. These devices will open as a new tab, as they are unable to display a website within a pop-up.
Settings
The Settings palette will activate when any module on a page is selected. You can then apply settings, such as border colour and size.
1. General
Title
The 'Title' field is set by default, but it's important to update it to something unique that reflects the interactivity - for example, 'iFrame - PageTiger website'. Descriptive names make it easier to identify the interactivity in your document, which is particularly helpful if you're using lots of the same module type.
Tooltip
A tooltip is a short piece of text which appears when a cursor is positioned over a module. It can be used to provide a brief description or explanation of the module - for example 'iFrame of PageTiger website'.
2. Accessibility
Focus Outline Colour
If Accessibility has been enabled for your document, this option can be used to choose the colour of the Focus Outline Colour. Focus Outline Colour is the colour of the outline that displays around the piece of Interactivity being viewed when a visitor uses the Tab key to navigate around a document.
3. Popup Style
Border Colour
A border adds a keyline around the iFrame pop-up box, and can be used as a way to draw attention to your content. Use this field to specify the colour of the border.
Border Size
Use the 'Border Size' field to specify the width of the border around the iFrame pop-up box. Enter a numerical value to set the border width - the higher the value, the thicker the border.
Back Colour
The 'Back Colour' field allows you to set a background colour for the iFrame pop-up box - select from the colour picker, enter a HEX code, or choose from your brand colours.
Margin Size
Margins create breathing space by adding a separation between the iFrame and the pop-up box. Enter a numerical value to set the margin size - the higher the value, the larger the margin.
Max Width & Height
Adjust the width and height of the pop-up box that the iFrame will be displayed in. Aim for no larger than 900 to ensure the iFrame is viewable on different monitor sides.
Disable Close
This option can be selected if you want to prevent the visitor from closing the pop-up box. Be mindful when using this option, to ensure they don't get stuck or unable to progress in your document.
4. Clickable Area
Position X & Y
Adjust the position of the clickable area. 'X' sets the position of the left edge and 'Y' sets the top edge.
Width & Height
Adjust the width and height of the clickable area. The size is measured in pts.
Link to Panel
Link the module to a Panel in your document. Once linked, the module will move with the Panel if it is repositioned or resized.
How to display a PDF in a pop-up pop
Displaying a PDF in an iFrame is a great option for showcasing infographics and presentations without taking your visitors away from your document. Simply upload the file to your Resources Manager, copy the resource URL and paste it into the URL field of the iFrame module.
