You can easily add call-to-action buttons (CTA) on your interactive map. Some popular examples of call-to-actions include:
- Visit Website
- Book Now
- Contact us
Our built-in call-to-action button feature is currently limited to 1 call-to-action for the map home and for each location.
For some of your mapping projects, you might want to have multiple call-to-actions per location. You can use regular hyperlinks, however, links are not as visible as the buttons.
We created this simple guide to let you easily add multiple action buttons on your map home and for each location on your map.
Note that the additional call-to-action buttons will open a new tab. It is not possible to open the target URL in a modal like for the built-in action button.
Add call-to-actions buttons with the default style
In the map home or location where you would like to add another action button, open the description HTML editor. Find the place where you would like the action button to appear and paste the HTML below. Replace the text and URL with your own call-to-action text and URL.
Remember that you can change the default color for the built-in CTA buttons under Setting > Colors
<a class="cta button" href="https://www.booking.com" target="_blank" rel="noopener noreferrer">Book Now</a>
Add call-to-action buttons with custom styles
You can easily customize the additional action buttons. For example, you can customize the background color, text color, font size, and more.
Customize the CSS template below with the color of your choices and copy and paste it into the CSS editor.
We provided the CSS for light and dark colors buttons.
For light color buttons
/*Customize Additional Action buttons - light color*/
.light-custom-cta {
background: pink !important;
color: black !important; /* set text color to black for readability */
}
For dark color buttons
/*Customize Additional Action buttons - dark color*/
.dark-custom-cta {
background: blue !important;
color: white !important; /* set text color to white for readability */
}
In the map home or locations where you would like to add another action button, open the description HTML editor. Find the place where you would like the action button to appear and paste the HTML below. Replace the text and URL with your own call-to-action text and URL.
<a class="cta light-custom-cta button" href="https://www.booking.com" target="_blank" rel="noopener noreferrer">Book Now</a>
For dark color buttons
<a class="cta dark-custom-cta button" href="https://www.booking.com" target="_blank" rel="noopener noreferrer">Book Now</a>
