After clicking on the popups option, you will be forwarded to another page where you can create a new popup or review the list of all the previously configured popups.
You can click on the Add New Button to create a new popup.

In this case, I already have configured a popup. Now to find that CSS selector clicks on the Edit Button.

After clicking on Edit, you should see another page. On that page, scroll down until you see the option Popup trigger[1], CSS selector(s) for the trigger click)[2] and Popup Position[3].

Popup trigger[1]:This option lets you configure how you want to trigger this popup. You should find popup trigger options such as Both, Onload, and Onclick. You have to click on the Onclick option because we want to show popups when someone clicks on the map.

CSS selector(s) for the trigger click)[2]:

Now, you have to add a CSS selector and then copy the CSS selector to the clipboard. 

Note: You have to put a dot(.) before the name of your CSS Selector and avoid using spaces when naming the CSS Selector.

Popup Position[3]:

In this option, you can configure Popup Posting.

How to Configure a Class for the State

To insert the CSS selector you just copied, hover over the USA Map[1] option and click on the Detailed Settings option[2].

Now, you should see a new page where you can select the state[1] you want to configure the pop-ups to, or you can directly select a state from the map by clicking on Choose On Map[2].

After you select a state, you should see a new page where you can configure your popups.

You should find the CSS Class Field[1] at the bottom of this page. In that field, insert the CSS selector you just copied and Click on Save Changes[2].

Note: When you paste the CSS Selector, remove the dot(.) you see at the beginning of the CSS selector.

Now, when you go back to the page where you have configured your map and click on the state you configured the popups for.

After clicking on the state, you should see the popup.

Conclusion

In this article, you have learned how to configure popups for the US map plugin and how you can show valuable information with popups. I hope you already have a good idea of how you can configure and have the best results using the popups with the US map.

Popups implemented with the Popup Builder plugin work on any device. They are equally convenient to use from both mobile phones and widescreen displays. If necessary, you can always customize the popup animation, and the appearance of the window, and embed various media files, subscription forms, shortcodes, and links in the popups (some options are available only in the premium version of the plugin).

Integration of Popup Builder with interactive maps from Fla-shop.com is an excellent way to expand the functionality of maps by adding modern, convenient and useful elements that allow you to convey valuable information to the users, collect leads, subscribe on the different newsletters depending on the division of the company, etc. Integration opens rich opportunities for the practical application of interactive maps.

Step-by-step setup guide

In this section, we will carry out a step-by-step integration of our Interactive US map plugin with the free Popup Builder plugin.

You can watch the following YouTube video:

1. Download a plugin with a map of the United States at this direct download link.
2. Upload the interactive US map plugin from Fla-shop.com on the “Plugins” -> “Add new” page. Select the .zip file and click “Install”.
3. In the search plugin box type «Popup Builder». Looking for this plugin and installing it. Note: since there are quite a lot of plugins with a similar name, we need the one whose developer is Sygnoos.
4. After installation, activate both plugins on the site.
5. Proceed to create a popup. Look for the Popup Builder menu and choose “Add New”. Next, set the format of the popup and type the data that will be displayed in the window. On the Add New Popup page, you can specify the width and height of the window, and various options for animation, sound, etc. Publish the popup.
6. Now we can display this popup in the Interactive US Map plugin. The display of popups is possible for regions, groups of regions, or individual points on the map. As an example, let’s display a popup for an arbitrary US state. Go to the “Detailed settings” section of the plugin, select any state, then in the “What to do when the area is clicked” check the “Show lightbox popup” item and select the popup we created earlier.
7. Done! We tied a lightbox to the state. Now we can go to the “Map Preview” section and test the display of the popup.

Integration of interactive maps with other plugins

Interactive maps from Fla-shop.com are flexible, expandable, and scalable. They have numerous integration possibilities with a variety of plugins and add-ons, the list of which is constantly updated.

We have already published a post about the integration of interactive maps with the Tabs Maker plugin. Tabs Maker allows you to display responsive maps in tabs that work perfectly on any device. This approach allows you to properly organize all the information on the site, effectively use free space, and offer visitors a quality experience of interaction with maps.

In addition, interactive maps from Fla-shop.com have their own API, which opens unlimited possibilities for their scaling and customization. It is possible to add arbitrary JS code for the implementation of a particular functionality.

If you use a CMS other than WordPress or want to manually integrate a lightbox into our interactive maps, then you can use the guide How to show a lightbox window by clicking the map.

Conclusion

Popups are a useful element of the map UI, allowing you to display all the necessary information in a concise, structured, and readable form with reference to the corresponding region.
Using the integration of Fla-shop.com’ Interactive maps with the Popup Builder plugin, you can automate the process of adding popups to different sections of the map, whether it’s a region, a group of regions, or a specific point.

Add interactivity to your maps! Your visitors will appreciate this because a convenient, solid, accessible design of the site guarantees high sales and customer loyalty.

Get the Interactive US Map plugin