Skip to main content
All CollectionsGeo PopupsOverview
Sample HTML for GeoPopup
Sample HTML for GeoPopup

Not very tech savy? Here are some sample HTMLs for you!

Chiara avatar
Written by Chiara
Updated over a week ago

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.

Did this answer your question?