Custom popups are a great way to let users interact beyond the map. You can provide links to external resources, use attributes in the links to load specific documents or pages, and even send an email. Here's how to create a link that opens the map viewer's email client with a pre-composed email message and recipient.
We'll need to make a "mailto" link. This tells web browsers to start a new email, rather than load a page. To generate a mailto link, you can use a handy online generator like https://mailtolink.me/
Just add your desired recipient, a subject, and even a pre composed message and grab the link code. Remember that Mango's attribute variables let insert any value from your data into link or image URLs, and mailto links are no different. For example, if your data contains a name and email addresses for your sales managers, {sales_name} and {sales_email} you can insert these as the email recipient, saving your users time and making the experience just that little bit slicker.
Here's an example generated using mailtolink.me:
mailto:{sales_email}?cc=team@company.com&subject=Enquiry%20about%20%7Bterritory%7D&?body=Hi%20%7Bsales_name%7D%2C%0A%0APlease%20send%20me%20further%20information%20about%20%7Bterritory%7D%20in%20%7Barea%7D.%0A%0AThanks!
The code looks complicated due to all the "%20" throughout. This is called URL encoding, and ensures special characters like line breaks, commas, and spaces will carry over into the email.
Before we move to the next step, we need to fix our attribute variables in the email subject and body so that Mango will read them correctly and insert the correct attribute.
Change %7Bterritory%7D to {territory}
Change %7Bsales_name%7D to {sales_name}
And the final code should look like this:
mailto:{sales_email}?cc=team@company.com&subject=Enquiry%20about%20{territory}&?body=Hi%20{sales_name}%2C%0A%0APlease%20send%20me%20further%20information%20about%20{territory}%20in%20%7Barea%7D.%0A%0AThanks!
Any text you wish to include in a pre-composed email subject or body must be URL encoded.
You can use an online URL encoder to convert your text to URL encoded text. However, ensure that any attribute variables you wish to include are not URL encoded, and must display the curly braces { }.
❌ %7Bname_f%7D
✔️ {name_f}
Some basic URL encoded characters
Space = %20
Comma = %2C
Line break = %0A
Learn more about URL encoding →
Now that we have mailto code, we need to wrap it in a HTML link tag, which looks like this:
<a href="This is where you put the mailto code">This is the link text the end user will see</a>
All together, the full link code should look like this:
<a href="mailto:{sales_email}?cc=team@company.com&subject=Enquiry%20about%20{territory}&body=Hi%20{sales_name},%0APlease%20send%20me%20further%20information%20about%20{territory}%20in%20%7Barea%7D.%0A%0AThanks!">Request further information</a>
Adding the link to your popup
- Open the custom popup editor, and click the code view
- Paste in the full link code in your desired location
- Switch back to normal view
- Save the popup