## Installation

1. Install Elfsight Popup WordPress Plugin `elfsight-popup-cc.zip` to your website. Don't know how? Please learn here.

2. Go to Popup page in WordPress admin menu.

3. Create a new widget, adjust all settings and get a ready-made shortcode.

### Use Popup as a WordPress Shortcode

#### 1. Create a new widget

You can use Elfsight Popup as a WordPress shortcode. To do this, you have to create a new widget, set all options in the Elfsight editor and save it.

#### 2. Copy-paste the shortcode

You will see the new widget's shortcode in the widgets list. You can copy-paste it into the required place of your website.

Example of the Elfsight Popup shortcode:

    [elfsight_popup id="1"]

### Use Popup as a Gutenberg Block

You can use Elfsight Popup as a block for Gutenberg editor. Just add it to your page during page building and select one of the available Popup widgets from the list.

### Use Popup as a WordPress Widget

To use Elfsight Popup as a WordPress widget, go to Appearance -> Widgets, and drag Elfsight Popup WordPress widget to any widget section. Next, select one of available Popup widgets from the list.

### Use Popup as a Visual Composer Element

You can use Elfsight Popup as a Visual Composer element. Just add it to your page during page building and select one of the available Popup widgets from the list.

## Options

Option | Default Value | Description
--- | --- | ---
Blocks
Blocks | - | Build your popup with the blocks you need.
Title: Title | Sample Title | Enter the title
Title: Color | rgb(17, 17, 17) | Choose the title font color
Title: Font Size | 24 | Set the title font size in pixels.
Title: Font Weight | Regular | Select bold or regular font.
Text: Text | - | Enter the text.
Text: Color | rgb(17, 17, 17) | Choose the text font color.
Text: Font Size | 17 | Set the text font size in pixels.
Banner: Image | - | Upload banner image.
Banner: Position | right | Select the banner position as related to the rest of the popup content. You can choose top, right, left or bottom.
Image: File | - | Upload your image.
Image: Scale | 100 | Adjust image size.
Video: YouTube / Vimeo URL | - | Paste your video's YouTube or Vimeo URL.
Video: Autoplay | ON | Set autoplay option to ON to have the video play automatically once the popup is open.
Coupon: Code | COUPON CODE | Enter the discount coupon code.
Coupon: "Click to Copy" text | CLICK TO COPY | Enter or edit your custom Click to Copy message.
Coupon: "COPIED" text | COPIED! | Enter or edit your custom COPIED message.
Coupon: Color | rgb(17, 17, 17) | Set the coupon block color.
Coupon: Font Size | 16 | Set the font size in pixels.
Button: Click Action | Redirect to URL | Select an action performed by clicking the button. You can either redirect the user to a specific URL or close the popup.
Button: URL | - | Set the URL to redirect the users to.
Button: Text | Button Text | Enter button text.
Button: Style | Filled | Choose your button's style - Filled or Outline.
Button: Color | rgb(17, 17, 17) | Set the button color.
Button: Font Size | 16 | Set the button font size in pixels.
Link: Click Action | Redirect to URL | Select an action performed by clicking the link. You can either redirect the user to a specific URL or close the popup.
Link: URL | - | Set the URL to redirect the users to.
Link: Text | Sample Text | Enter the link text.
Link: Color | rgb(17, 17, 17) | Set the link color.
Link: Font Size | 17 | Set the font size in pixels.
Separator: Color | rgba(17, 17, 17, .2) | Set the separator color.
Separator: Margin | 0 | Set the margin for the separator. This will define the spacing between the separator and previous/next block.
Spacing: Size | 16 | Set spacing in pixels.
iFrame: URL | - | Set the iframe URL.
iFrame: Width | 100% | Set the iframe width in pixels or percents. Set 100% to make it take up the entire width of the popup.
iFrame: Height | 300 | Set the iframe height in pixels.
HTML Code: Code | - | Enter your custom HTML code.
Form: Fields | - | Use fields to build your form.
Form: Button Text | Submit | Enter the form submit button text.
Form: Action After Submit | Close the Popup | Select an action performed after the form is submitted. You can either redirect the user to a specific URL or close the popup.
Form: Action After Submit: URL | - | Set the URL to redirect the users to.
Form: Button Style | Filled | Choose your button's style - Filled or Outline.
Form: Font Size | 16 | Set the font size in pixels. This will be applied both to the fields and the submit button.
Form: Button Color | rgb(17, 17, 17) | Set submit button color.
Form: Fields Color | rgb(255, 255, 255) | Set the fields color.
Layout
Layout | Modal | Select the popup layout.
Width | 500 | Set the popup width in pixels.
Blocks Alignment | Center | Align the popup blocks on left, right or in the center.
Popup Corners | Square | Select popup corners type - Square or Rounded.
Popup Background Color | rgb(255, 255, 255) | Set the popup background color.
Popup Background Image | - | Upload a background image for your popup.
Popup Background Image Overlay Color | - | Set the background image overlay color.
Display Overlay | ON | Activate/Deactivate popup overlay.
Close popup on overlay click | ON | Set this option to ON to close the popup on overlay click.
Overlay Background Color | rgba(17, 17, 17, 0.7) | Set the overlay color.
Overlay Background Image | - | Upload the overlay image.
Overlay Background Image Overlay Color | - | Set the image overlay color.
Display Close Button | ON | Set this option to ON to show a close button on your popup.
Close Button Color | rgba(17, 17, 17, 0.7) | Set the close button color.
Display
Triggers: On Page Load | ON | Open popup once the page is loaded.
Triggers: Time on Page | OFF | Open popup after a user spends a specific amount of time (in seconds) on the page.
Triggers: Time on Page Duration | 30 | Set the time interval in seconds to open popup.
Triggers: On Scroll | OFF | Open popup after a user has scrolled over a specific percentage of the page.
Triggers: Scroll Position | 50 | Set the percentage.
Triggers: On Scroll to Element | OFF | Open popup after a user has scrolled over a specific element on your page.
Triggers: HTML Element ID | - | Enter the element's id.
Triggers: On Click | OFF | Open popup when a user clicks on the specific element on your page.
Triggers: On Exit Intent | OFF | Open popup when a user intends to close the page.
Frequency | Show every time | Choose display frequency for your popup.
Select pages to display | All Pages | Set the pages on which your popup will be displayed.
Don't display widget on these pages | - | List the pages where you don't want to display the widget.
Display widget only on these pages | - | List all the pages that will display the widget.
Devices | Desktop, Tablet, Mobile | Choose the type of device to display your popup on.

## Support, questions and offers

Your questions and issue reports are processed on the first-come, first-served basis. Expect an answer from 10 a.m. to 7 p.m. CET, Monday through Friday.

Visit Support Center