How do I create a custom marker popup?

By default, your marker popups contain location's name and address (and if you have a listing layout then also a few more details). You can also create your own HTML template:

  1. Navigate to Widget > HTML & CSS
  2. In the Custom marker popup field, enter the following:

    <div>
      this is a popup
    </div>

You can see that the popup is not styled and doesn't look very exciting:

Of course you can add your own styling by using custom CSS, or you can piggyback on some of the existing styles:

<div class="zsl-info-window">
  <div>this is a popup</div>
  <div class="zsl-info-window-angle"></div>
</div>

Now your marker will have some basic styling:

You can also use location variables to add dynamic content to your popups:

<div class="zsl-info-window">
  <div>timezone here is "{{timezone}}"</div>
  <div class="zsl-info-window-angle"></div>
</div>

Here's a list of available variables:

  • address - full address of the location
  • appointment - url of the appointment link
  • contact - location's contact field
  • coords.lat - geographical latitude
  • coords.lng - geographical longitude
  • customText - location's custom text field
  • displayAddress - display address
  • distance - distance from the user (eg: 0.1 mi)
  • email - location's email field
  • name - location name
  • phoneNumbers.0.number - the first phone number field
  • timezone - location's timezone
  • website - location's website field
  • customData.keyName1 - location's custom field under keyName1
Was this article helpful? /
How can we improve this page?
This feedback is used only to improve this support page. Please email us directly at support@zenlocator.com if you'd like assistance.