If you are not a very technical person and you are unsure how to write HTML, no worries! Here are some examples of popups created by our real customers - feel free to take them as inspiration and base your popup HTML on the samples below.
Image based popup
The easiest way to create a popup is to use a pre-made image design.
Leave the Background Image URL blank.
Leave the Background Color blank or set color to #ffffff.
Set the popup width & height to the same height as the dimensions of your image.
Use the following code - make sure to modify it with the desired URL and width and height the same as the size of the image you are using
<a href="{insert popup destimation URL}" style="display:block; width:{image width}px; {image height}px;"> <img src="{insert popup image URL}"> </a>
Opening links in the new tab
In case you want to open the popup link in a new tab, use the target="_blank" attribute of the <a> tag in side the popup HTML.
<a href="{insert popup destimation URL}" target="_blank"> ...
</a>
Text based popup with a button & use of Geo Targetly variables in the popup HTML
In case you want to use a popup with clickable buttons, text and country flags, names, codes, β¦ auto-generated based on visitor location, feel free to start with the following sample.
Set a desired Background Color (we are using #ffffff in this example)
Leave the Background Image URL and Height (px) blank
Set the Width (px) to 650
Use the following HTML code (modified to your desire)
<div class="geopopup-wrapper">
<div>
<img class="geopopup-flag" src="{{flag_url}}" alt="{{country_name}}" /> /* this is an auto generated flag image of the visitor's country */
</div>
<h2>Insert headline here</h2>
<h3>Insert subheadline here and - feel free to use <strong>{{country_name}}</strong></h3> /* this subheadline generates an automatic name of the visitor's country in bold */
<div>
<a class="geopopup-cta" href="{insert destination URL here}">VISIT {{country_code}} SHOP</a> /* change the copy of the button as desired; button contains auto generated code of the visitor's country */
</div>
</div>
<style>
.geopopup-wrapper h1, .geopopup-wrapper h2, .geopopup-wrapper h3, .geopopup-wrapper h4, .geopopup-wrapper h5 {
font-family: 'Glacial Regular' !important; /* feel free to change the font as desired */
letter-spacing: 0.35rem !important;
font-weight: 400 !important;
font-style: normal !important;
text-transform: none !important;
margin: 0;
}
.geopopup-wrapper b, .geopopup-wrapper strong {
font-family: 'Glacial Bold' !important; /* feel free to change the font as desired */
font-weight: 700 !important;
font-style: normal !important;
}
.geopopup-wrapper {
font-family: 'Glacial Regular' !important; /* feel free to change the font as desired */
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem 2rem;
gap: 2rem;
}
.geopopup-flag {
/* uncomment the following flag widths as necesarry */
/* width: 107px; */
/* width: 320px; */
/* height: auto; */
border-radius: 0.313rem;
}
.geopopup-wrapper h2 {
font-size: 2.5rem;
}
.geopopup-wrapper h3 {
font-size: 2.0rem;
}
.geopopup-cta {
display: block;
color: white;
background-color: #232629; /* change the color of the CTA button here */
padding: 1.0rem 1.3rem;
font-family: 'Glacial Bold', sans-serif; /* change the font of the CTA button here */
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.25rem;
text-decoration: none;
}
.geopopup-cta:hover { /* this introduces a hover behaviour of the button */
color: white;
background-color: #000000;
}
</style>
In case the HTML is still giving you a hard time, feel free to reach out to our support team - they would be more than happy to help you troubleshoot the popup code.