Media
      Back to home
      1. PageTiger User Guide
      2. Adding Interactivity
      3. Media

      iFrame in pop-up

      Maximize the effectiveness of linking to external websites without redirecting your visitors away from your document. By using an iFrame, you can present external content in a convenient pop-up box. This feature allows you to showcase various resources, such as a page from your company website, details about an upcoming event, or even another PageTiger document.

      • Navigate to a document, and select 'Design' for the version you wish to work on.

      • Select the ‘Interactivity’ tab at the top of the page.

      • Select the ‘Media’ module type from the ‘Add Interactivity' palette (found to the right of the page).

      • 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 have different security policies - while some might display in an iFrame, others will disable the feature, preventing it 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

        Click on a module already placed on your page to activate the Settings palette. This allows you to configure options like pop-up size and border colour.

        Name
        The 'Name' field is set by default, but it's important to update it to something unique that reflects the interactivity - for example, 'iFrame - PageTiger website', as it will be shown in the Analytics of you document.

        Descriptive names make it easier to identify the interactivity used in your document, which is particularly helpful if you're using lots of the same module type.

        Interactivity ID
        Copy this token and paste it into the 'Activate Interactivity' menu item type to activate the module directly from a menu.

        Description
        The text entered here will display when a user hovers their cursor over a module. It is also read out by a screen reader when a document is viewed in accessible mode.

        Focus Outline Colour
        This option can be used if Accessibility has been enabled for your document, and sets the colour of the outline that displays around the piece of interactivity being viewed.

        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 avoid causing frustration to readers as it can prevent them from navigating further in your document.

        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 can be useful for showcasing infographics and presentations without taking your visitors away from your document - please note, this options can work differently depending on the device and settings being used.

        • Upload the file to your Resources Manager.
        • Copy the Resource URL.
        • Paste it into the URL field of the iFrame module.