How to Make an OptiMonk Popup that is a Clickable Image?

If you already have a popup image designed with every element you want as an image file, you can use that for your OptiMonk Campaign, and make it clickable for the visitors. It is also very simple to use. Please follow the below steps to do so:

1. Log in to your OptiMonk account at https://app.optimonk.com/ 

2. Select Campaigns on the left, then select the Campaign you wish to edit:

mceclip0.png

3. Click on the Variant you want to edit. This will take you to the Campaign editor:

mceclip1.png

4. If you have created a popup from one of our many available templates, it will already have some elements: 

mceclip3.png

As you can see, this popup already has a lot of elements so it is almost ready to use, but let's say I already have an image file with the popup design I want. Here is the image:

mceclip2.png

You might also be able to achieve a similar design by creating it manually in the Campaign editor, but there is a much easier way: you just need to upload your image, set it as a background, and add an opaque button to the right place. I will detail these steps below.

 

5. Next, we need to delete the elements of the Campaign. If you already have an image with the design you want, you can remove the elements of the Campaign template: just hover over any of the elements, and click on the bin icon to remove it:

mceclip4.png

6. Once you have removed all the elements, the design should look like this under Layout:

mceclip5.png

7. Click on Frame under Layout:

mceclip6.png

8. Click on Fill under Style:

mceclip7.png

9. Select Image from the available options:

mceclip8.png

10. Click on Add image:

mceclip9.png

11. Click on Upload new image to upload your image file:

mceclip10.png

Once uploaded, click on the button Use image:

mceclip11.png

12. Now the uploaded image is the background of our popup:

mceclip12.png

Click on General to adjust the size of the popup:

mceclip13.png

13. Finally, we need to add a button to your popup if you want your visitors to be able to click on it. Click on the back arrow icon:

mceclip14.png

Now click on Add element, then drag the Button element to the popup to use it:

mceclip15.png

You will be able to adjust the size of the button under Style:

mceclip16.png

You should also set the Hover color to opaque under Background:

mceclip17.png

Once you are happy with the button size, set the border to None (you might want to do this step last so it is easier to position the button later):

mceclip18.png

Now add Spacer element(s) to position your Button where you want it:

mceclip19.png

You can adjust the size of the Spacer element to position your button perfectly (please note that depending on the size of the image and the popup, you might need to add multiple Spacer elements as their maximum size is limited):

mceclip20.png

You can adjust the size of the Spacer differently for mobile view by clicking on the Mobile icon:

mceclip21.png

If you click on the Button element, you will see further options on the left to customize how you want to use it:

mceclip22.png

14. That's it! Click on Save & Exit in the top right corner to save the changes:

mceclip23.png

If you have any further questions or need any help, just let us know at support@optimonk.com and we would be happy to assist you :)

Have more questions? Submit a request

Comments