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 

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


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


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


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:


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:


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


7. Click on Frame under Layout:


8. Click on Fill under Style:


9. Select Image from the available options:


10. Click on Add image:


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


Once uploaded, click on the button Use image:


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


Under Style, click on Size to adjust the size of the popup:


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 Elements icon:


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


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


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



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):


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


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):


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


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


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


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

Have more questions? Submit a request