[Hustle] Popup with just a clickable image

I would like to create a popup with just an image and without using any of the text fields. Is it possible to do this without resorting to using my own CSS to style the popup in such a way that the background etc. is hidden?

Is it possible to do this and still make use of the tracking features? It seems to me that the tracking only works when you use a button with the design.

  • Adam Czajczyk

    Hello Web International Services,

    I hope you're well today and thank you for your question!

    It's possible to create a popup like this but it will require some additional css and while you can track "Views" without the button, you'll need the button to track conversions. That's still doable, though :slight_smile:

    Here's what worked for me:

    1. Create a popup and in "Content" section:

    - give it any name you like
    - disable "Use titles" option in "Pop-up titles"
    - don't put anything into "Main Content"
    - enable "Use featured image" and select your image
    - enable "Show call to action button"
    - put any text as a "label" and your target URL in "URL" field, select if it should open a new window or load into the same one
    - disable "Add email collection to this pop-up".

    Save and continue

    2. In "Design" section:

    - select "Simple" from a "Select a style to use" drop down list
    - disable "Customize Colors"
    - set Featured image position" to "left"
    - set "Feature image fitting" option to "Cover" and both horizontal and vertical position to "Center"
    - disable "Border", "Drop Shadow" and "Custom pop-up size" options
    - enable "Custom CSS" option
    - put this CSS into the custom css field:

    .hustle-modal-body {min-height:500px;}
    .hustle-modal-content {background:rgba(255,255,255,0)!important;}
    .hustle-modal-content a {
    	position:absolute;
    	top:25px;
    	left:0;
    	right:0;
    	bottom:0;
    	background:transparent!important;
    	color:transparent!important;
    }
    .hustle-modal-content {
    	background-color:red!important;
    	flex:0!important;
    	height:0;
    	width:0;
    	padding:0!important;
    }
    .hustle-modal-image {
    	flex:100%!important;
    }

    Note please: in the first line of that CSS you might want to adjust the height of the popup; I used 500px here but you might want to make it shorter or taller;

    Save and Continue

    3. Set any display conditions that you need in "Display Settings" section and "Finish"

    4. On a popup list enable tracking in a drop-down menu for that popup.

    I set such popup on my test site this way and it worked fine, I think. Give it a try please and let me know how it works for you :slight_smile:

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.