How To Link The Map To a Popup Box

Introduction

When you visit a website and suddenly see a window in front that promotes/showcases some products or services, it is called a popup. Popups are also known as display modal windows. Popups can also collect user emails, grow brand awareness, and describe new products directly to website visitors. The popup can also be used in many creative ways. You can add many useful functions with the popups to increase the user experience of your website. Also, by clicking on the interactive map for website from Fla-shop.com, you can trigger a popup box, enhancing the user experience on your website. Popups can be great if you want to provide information about a specific state or location.

Popup boxes are very easy to configure. This article will show you how to integrate popup boxes into maps using the Interactive US map plugin.

What are the Interactive Maps from Fla-shop.com

Fla-shop.com offers interactive maps that are ideal for website owners, providing an engaging experience for users. These maps are designed to be simple, easy to use, and highly interactive, with clickable states and markers, customizable colors, links, and popups. The maps are based on SVG (Scalable Vector Graphics), which enhances the loading and rendering speed of the map, making it scalable for all screens.

The maps available on Fla-shop.com include maps of the US, the world, and most countries, making them a versatile solution for business owners globally. They are also mobile-friendly and can be easily customized to fit the needs of your website. Unlike other maps that use Google Maps API or other third-party services, Fla-shop.com's maps do not rely on these services, improving loading speeds.

With over 10 years of experience in providing interactive maps, Fla-shop.com, and its developers have the expertise to meet the needs of all websites and businesses. The clickable state markers and customizable features make it easier for visitors to navigate the map and find the information they are seeking, while the visually engaging presentation of information helps to keep visitors engaged with the website.

If you're looking for an interactive map solution for your website, Fla-shop.com is an excellent choice. With its simple design, easy customization, and high-speed performance, these maps are sure to provide an engaging experience for your visitors.

What is the Popup Box plugin

It is very easy to configure popups in WordPress. You can use a simple plugin to configure popup boxes. In this article, we are using the Popup Box plugin. AYS Pro Plugins develop the plugin.

The Popup Box plugin comes with a wide range of features searches, built-in templates, custom HTML/CSS support, and the ability to activate popups based on user interactions like clicks or time on the page. Popup boxes can be an excellent choice for website owners looking to add customizable popups without coding knowledge.

Using this plugin, you can customize and configure a fully responsive popup for your WordPress websites. You can also link the US map to show a popup window when users click on it. You have to use the CSS class identifier to set up the popup.

How To Add the Class to Configure PopUps

To configure a popup, you have to install the Popup Box plugin.

To install the Popup Box plugin, you must head to your WordPress website's plugin option.

Now click on add new button.

After clicking on add new button, you should arrive at the add plugins page. On this page, click on the search field and search for the term "popup box". After you enter the term, you should see a plugin called "Popup Box" in the search result. Now click on Install Now button.

You can install any other plugins if you want. Just make sure that it offers the same functionalities as the Popup Box plugin.
After the installation is completed, you should see an activate button. Now click on the Activate button.

After clicking Activate, you should see the Popup Box plugin on the left side of your dashboard. Now you can start configuring the popup box for your interactive maps.

To set up a popup box, click on the Popup Box plugin and the Popups option in the right dropdown menu.

By clicking on the popups option, you will be redirected to another page where you can add your popup. On this page, you will also review all previously configured popups.
To create a new popup, click on the Add New button.

After clicking, you should see a new window where you can choose your popup type. In this case, I am selecting custom content in this case, but you can choose a type based on your preference. After selecting the type, click on the Select button.

After clicking, you should see a new page where you can configure and customize your popups. Now scroll down until you see the Popup Trigger, CSS Selector, and Popup Position options.

1. Popup trigger:
This option controls how the popup is triggered. You can select Onclick and Onload, or both on click & onload.

Selecting Onload will trigger your popups when the user lands on your website and the page loading finishes.

Selecting Onclick will trigger popups when the user clicks on the element with which the popup is configured. The element could be a button, menu, or offer banner. In this case, we are going to configure it with a map.

2. CSS selector(s) for the trigger click):
In the CSS selector section, you must add and copy the CSS selector, which will be attached to an element later. Here you can assign multiple selectors.
Here you are allowed to enter two types of CSS selectors:

• Class: The class selector starts with a dot(.)
• ID: The selector starts with a hash(#)

3. Popup Position[3]:

This option controls the popup position. You can position based on the blocks in this option.

How To Configure Popup Box For Maps

You can easily configure popup boxes on your maps. You can configure popup boxes for your maps to show information about specific states or locations. The popup should activate when the user clicks in that particular state/location.

To configure popups, you have to use the CSS selector you just copied to your clipboard.
Firstly, download and install the US map plugin.

After installing, you should see the US Map plugin option on the left side of the admin dashboard.
Now, hover over the USA Map option and then click on the Detailed Settings option.

After clicking, you should see a new window. In this window, you must Select The Area where you want to configure the popup.

After clicking, you should see the list of all states in the US. Now Choose a state from this list, or you can choose the state directly from the map.

You can also visually select states from the map by clicking on the Choose On Map button.

After clicking on the button, you should see the map popup in front. Now select your preferred State/Area from the map.

After selecting a location, scroll down until you see Map Area Section. In this section, you should find a field called CSS Class.

Now, paste the CSS class you just copied to your clipboard. You can customize the area color. You can also configure the area hover color from the Map Area section.

After pasting, click on the Save Changes button.

Note: When you paste the CSS Selector, remember to remove the dot(.) or hash(#) you see at the beginning of the CSS selector.

Go to the page where you set up your locations or maps and click on the state/location you set up the popups for.

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

Conclusion

Adding popups can be fun but make sure it is manageable to the website users. But you can definitely add popups to your website with maps to provide a better user experience and help you achieve specific goals such as promoting products, collecting user emails, or providing information about a location/store.

The Popup Box plugin is a simple and effective solution for configuring map popups in your WordPress website.

You now have the ability to create fully responsive popups and integrate them it the interactive map without having any coding knowledge.

The steps to add popups to your website with maps include installing the Popup Box plugin, creating a new popup, configuring the trigger, CSS selector, and position, and then integrating the CSS selector with the Interactive US map plugin.