DJ-Extension Knowledge Base: How to use DJ-Popup
Login

New to DJ-Extensions?

How to use DJ-Popup

How to use DJ-Popup?

Below is a short instructional video showing how to easily turn our section into a DJ-Popup.

Status

If the section is correctly configured as a DJ-Popup. The section will be marked as a DJ-Popup which makes it easier to identify the popups created on the subpage

dj-popup section view

If the system detects that a section is marked as DJ-Popup but no trigger has been declared, the section will be marked as invalid

dj-popup no trigger declared view

Configuration

Content

  • Enabled - Use this checkbox to specify whether the section is to be converted as a DJ-Popup

  • Heading - With the value of this text field you can specify what title will be displayed in your popup

  • Close icon - Use this field to set your own closing icon for the DJ-Popup

  • Save text - Content of the button responsible for the save action

  • Save link - Link assigned to the button responsible for the save action

  • Cancel text - Content of the button responsible for the DJ-Popup closing action

Settings

  • Heading

    • Header style - You can specify the header size in h1-h6
  • Repeat

    • Repeat popup - always/first time only/after x time
    • Repeat after x time in format DD:HH:MM
  • Direction

    • Popup open direction - choose the direction from the list
    • Position margin - set the position margin value
  • Popup

    • Overlay color - You can use it to specify the background colour of the popup overlay
    • Animation - Type of animation to display the DJ-Popup
    • Fullscreen - DJ-Popup mode built into UIKit
    • Width - Width of DJ-Popup ( % )
    • Height - Height of DJ-Popup ( % )
    • Padding - Padding to be placed on top of the main DJ-Popup container
    • Left - Distance from left side of screen ( % )
    • Right - Distance from right side of screen ( % )
    • Top - Distance from top side of screen ( % )
    • Bottom - Distance from bottom side of screen ( % )
  • Footer

    • Save button style - The style of the button responsible for the save action
    • Cancel button style - Style of button responsible for DJ-Popup closing action

Triggers

DJ-Popup allows us to create a trigger. You can use them to determine at which point the popup will be displayed. The popup will only be displayed once when any trigger is called.

On Page Load

Automatically display a popup when a visitor opens your site.

Available parameters:

  • Delay - A value specified in milliseconds after which the trigger will be called

On Scroll

Automatically display a popup when user scrolls % of page.

Available parameters:

  • Distance - Value specified as a percentage. When the page is scrolled to the specified distance, the trigger will be called

Scroll to

Automatically display a popup when user scrolls page to the element

Available parameters:

  • Link - You can use this attribute to assign a trigger to a link anchor
  • Selector - CSS selector assigned to the trigger

On hover

Show a popup when user hovers on specific parts of the page.

Available parameters:

  • Link - You can use this attribute to assign a trigger to a link anchor
  • Selector - CSS selector assigned to the trigger
  • Repeating - If you check this option, the trigger will be called each time the user fulfils its condition

On Click

Automatically display a popup when user scrolls page to the element

Available parameters:

  • Link - You can use this attribute to assign a trigger to a link anchor
  • Selector - CSS selector assigned to the trigger
  • Repeating - If you check this option, the trigger will be called each time the user fulfils its condition

© 2023 DJ-Extensions.com. All rights reserved.