How to add an on-click pop-up? Click button/image for more info while on same page

What is an on-click pop-up? 
Create a custom Pop-Up through Elfsight
Set up an "on-click" trigger for the widget
Add the widget to Rocketspark

What is an on-click pop-up? 

You can add a pop-up to a content block (such as an image) that contains more information. This pop-up can be triggered when a customer visits a specific page and clicks the image/button. 

On-click pop-ups can be used for displaying a quick sign-up to an event, showing more information for a team member, or a preview of a product - all while the visitor remains on the same page. 

You will need to be using the third-party integration, Elfsight, for this custom widget. Elfsight has a free plan, depending on what you wish to achieve, otherwise here is Elfsight Pricing. 

Create a custom Pop-Up through Elfsight

1. Go to the platform 'Elfsight' and Signup/Login 
   
   
2. Choose one of the custom pop-up templates 
   
   
3. Click "Continue with this template" 
   
   
   
   
4. Go through each step within the Builder settings to customize the widget (change the text, image, button, and styling). 
   
   
   
   
5. You can add more blocks to the widget (such as a coupon or form) - click "Add block" at the bottom of the builder editor.
   
   
   
   
6. Go to the Layout settings to change the spacing and layout of the widget. 
   
   

Once you are happy with the widget design, follow the steps below to activate an "on-click" trigger

Set up an "on-click" trigger for the widget

1. Go to Settings in the widget editor
   
   
2. Go through each setting below:
   
   Frequency: Choose how often to display the popup for a new website visitor
   Pages: You won't need to add any pages here.
   Devices: Choose the type of device to display your popup on
   
   
   
   
3. Go to Triggers
   
   
   
4. If you want the pop-up to appear on-click, only toggle "On Click"
   
   
   
5. You will want to go to your Rocketspark website and go to the image/button that you wish this pop-up to open on and find the HTML Element ID
   
   To do this:
   -  Right Click on the block
   
   -  Click "inspect"
   
   
   -  Click on the arrow icon in the top right corner of the inspection tool and click on the image/button to inspect this specific content.
   
   
   
   - The HTML Code you will want to look for should be similar to column_1_stack_1753997
   
   
   
   
   
6. Go back to Elfsight and add this HTML Code - > Click Publish to save these changes
   
   
   
   
7. Go to your Elfsight Widget Dashboard (close out of the widget editor) and click "Install" next to your new widget
   
   
8. Copy the code provided

Add the widget to Rocketspark

1. Go to the desired page on your Rocketspark site and add a code block (you can add this block anywhere on the page)
   
   
   
   
2. Paste the code you copied earlier into this code block
   
   
3. Go to your live domain and test this pop-up

If you have any questions or get stuck, please contact support@rocketspark.com