{"id":1665,"date":"2022-10-28T12:24:37","date_gmt":"2022-10-28T12:24:37","guid":{"rendered":"https:\/\/www.fla-shop.com\/blog\/?p=1665"},"modified":"2022-12-22T10:24:11","modified_gmt":"2022-12-22T10:24:11","slug":"easily-show-popups-on-maps","status":"publish","type":"post","link":"https:\/\/www.fla-shop.com\/blog\/easily-show-popups-on-maps\/","title":{"rendered":"How To Link The Map To a Popup Box"},"content":{"rendered":"\n<div class=\"wp-block-group article_sm_block\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p>Today we will see how to integrate popups by Popup Box plugin with the <a href=\"https:\/\/www.fla-shop.com\/products\/wp-plugins\/united-states\/us\/\">Interactive US map plugin<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/us-map-popup-box-2-1024x538.png\" alt=\"\" class=\"wp-image-1678\" srcset=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/us-map-popup-box-2-1024x538.png 1024w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/us-map-popup-box-2-300x158.png 300w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/us-map-popup-box-2-768x403.png 768w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/us-map-popup-box-2-524x275.png 524w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/us-map-popup-box-2-700x368.png 700w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/us-map-popup-box-2.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">What is the Popup Box plugin<\/h2>\n\n\n\n<p>You can easily configure the popup in WordPress using a simple plugin. In this case, we are using the <a href=\"https:\/\/wordpress.org\/plugins\/ays-popup-box\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Popup Box<\/a> plugin. This plugin can help you to configure a fully responsive, customizable, and engaging popup for WordPress, which can be later linked with the US map plugin. The CSS class name is used to set the popup to be triggered when you click on the map.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How To Add the Class to Configure PopUps<\/h2>\n\n\n\n<p>To configure a popup message, hover over the <strong>Popup box plugin [1]<\/strong> in the left menu and click on the <strong>Popups [2] <\/strong>Section.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group article_lg_block\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1904\" height=\"937\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box7-2.png\" alt=\"\" class=\"wp-image-1671\" srcset=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box7-2.png 1904w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box7-2-300x148.png 300w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box7-2-1024x504.png 1024w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box7-2-768x378.png 768w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box7-2-1536x756.png 1536w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box7-2-524x258.png 524w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box7-2-700x344.png 700w\" sizes=\"auto, (max-width: 1904px) 100vw, 1904px\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group article_sm_block\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p>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.<br>You can click on the Add New Button to create a new popup<strong>.<\/strong><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group article_lg_block\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1744\" height=\"429\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box9.png\" alt=\"\" class=\"wp-image-1688\" srcset=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box9.png 1744w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box9-300x74.png 300w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box9-1024x252.png 1024w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box9-768x189.png 768w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box9-1536x378.png 1536w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box9-524x129.png 524w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box9-700x172.png 700w\" sizes=\"auto, (max-width: 1744px) 100vw, 1744px\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group article_sm_block\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p>In this case, I already have configured a popup. Now to find that CSS selector clicks on the <strong>Edit <\/strong>Button.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group article_lg_block\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1727\" height=\"458\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box10.png\" alt=\"\" class=\"wp-image-1691\" srcset=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box10.png 1727w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box10-300x80.png 300w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box10-1024x272.png 1024w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box10-768x204.png 768w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box10-1536x407.png 1536w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box10-524x139.png 524w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box10-700x186.png 700w\" sizes=\"auto, (max-width: 1727px) 100vw, 1727px\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group article_sm_block\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p>After clicking on Edit, you should see another page. On that page, scroll down until you see the option <strong>Popup trigger[1]<\/strong>, <strong>CSS selector(s) for the trigger click)[2] <\/strong>and <strong>Popup Position[3].<\/strong><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group article_lg_block\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1901\" height=\"938\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box6.png\" alt=\"\" class=\"wp-image-1693\" srcset=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box6.png 1901w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box6-300x148.png 300w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box6-1024x505.png 1024w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box6-768x379.png 768w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box6-1536x758.png 1536w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box6-524x259.png 524w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box6-700x345.png 700w\" sizes=\"auto, (max-width: 1901px) 100vw, 1901px\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group article_sm_block\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>Popup trigger[1]:<\/strong>This option lets you configure how you want to trigger this popup. You should find popup trigger options such as<strong> Both, Onload, and Onclick<\/strong>. You have to click on the <strong>Onclick <\/strong>option because we want to show popups when someone clicks on the map.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group article_lg_block\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1677\" height=\"347\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box12.png\" alt=\"\" class=\"wp-image-1694\" srcset=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box12.png 1677w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box12-300x62.png 300w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box12-1024x212.png 1024w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box12-768x159.png 768w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box12-1536x318.png 1536w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box12-524x108.png 524w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box12-700x145.png 700w\" sizes=\"auto, (max-width: 1677px) 100vw, 1677px\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group article_sm_block\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>CSS selector(s) for the trigger click)[2]:<\/strong><\/p>\n\n\n\n<p>Now, you have to add a CSS selector and then copy the CSS selector to the clipboard.&nbsp;<\/p>\n\n\n\n<p><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">Note: You have to put a dot(.) before the name of your CSS Selector and avoid using spaces when naming the CSS Selector.<\/mark><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group article_lg_block\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1744\" height=\"901\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box4.png\" alt=\"\" class=\"wp-image-1695\" srcset=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box4.png 1744w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box4-300x155.png 300w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box4-1024x529.png 1024w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box4-768x397.png 768w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box4-1536x794.png 1536w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box4-524x271.png 524w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box4-700x362.png 700w\" sizes=\"auto, (max-width: 1744px) 100vw, 1744px\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group article_sm_block\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p><strong>Popup Position[3]:<\/strong><\/p>\n\n\n\n<p>In this option, you can configure Popup Posting.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group article_sm_block\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading\">How to Configure a Class for the State<\/h2>\n\n\n\n<p>To insert the CSS selector you just copied, hover over the <strong>USA Map[1]<\/strong> option and click on the <strong>Detailed Settings option[2].<\/strong><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group article_lg_block\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1904\" height=\"938\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box2.png\" alt=\"\" class=\"wp-image-1696\" srcset=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box2.png 1904w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box2-300x148.png 300w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box2-1024x504.png 1024w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box2-768x378.png 768w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box2-1536x757.png 1536w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box2-524x258.png 524w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box2-700x345.png 700w\" sizes=\"auto, (max-width: 1904px) 100vw, 1904px\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group article_sm_block\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p>Now, you should see a new page where you can <strong>select the state[1]<\/strong> you want to configure the pop-ups to, or you can directly select a state from the map by clicking on <strong>Choose On Map[2].<\/strong><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group article_lg_block\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1910\" height=\"935\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box5.png\" alt=\"\" class=\"wp-image-1698\" srcset=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box5.png 1910w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box5-300x147.png 300w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box5-1024x501.png 1024w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box5-768x376.png 768w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box5-1536x752.png 1536w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box5-524x257.png 524w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box5-700x343.png 700w\" sizes=\"auto, (max-width: 1910px) 100vw, 1910px\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group article_sm_block\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p>After you select a state, you should see a new page where you can configure your popups.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group article_lg_block\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1146\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box3.png\" alt=\"\" class=\"wp-image-1699\" srcset=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box3.png 1920w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box3-300x179.png 300w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box3-1024x611.png 1024w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box3-768x458.png 768w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box3-1536x917.png 1536w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box3-524x313.png 524w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box3-670x400.png 670w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group article_sm_block\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p>You should find the <strong>CSS Class Field[1]<\/strong> at the bottom of this page<strong>. I<\/strong>n that field, insert the CSS selector you just copied and Click on <strong>Save Changes[2]<\/strong>.<\/p>\n\n\n\n<p><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-red-color\">Note: When you paste the CSS Selector, remove the dot(.) you see at the beginning of the CSS selector.<\/mark><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group article_lg_block\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1905\" height=\"941\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box1.png\" alt=\"\" class=\"wp-image-1700\" srcset=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box1.png 1905w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box1-300x148.png 300w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box1-1024x506.png 1024w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box1-768x379.png 768w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box1-1536x759.png 1536w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box1-524x259.png 524w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box1-700x346.png 700w\" sizes=\"auto, (max-width: 1905px) 100vw, 1905px\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group article_sm_block\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p>Now, when you go back to the page where you have configured your map and click on the state you configured the popups for.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group article_lg_block\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1652\" height=\"901\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box8.png\" alt=\"\" class=\"wp-image-1701\" srcset=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box8.png 1652w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box8-300x164.png 300w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box8-1024x558.png 1024w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box8-768x419.png 768w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box8-1536x838.png 1536w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box8-524x286.png 524w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box8-700x382.png 700w\" sizes=\"auto, (max-width: 1652px) 100vw, 1652px\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group article_sm_block\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p>After clicking on the state, you should see the popup.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group article_lg_block\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1649\" height=\"905\" src=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box11.png\" alt=\"\" class=\"wp-image-1702\" srcset=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box11.png 1649w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box11-300x165.png 300w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box11-1024x562.png 1024w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box11-768x421.png 768w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box11-1536x843.png 1536w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box11-524x288.png 524w, https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/popup-box11-700x384.png 700w\" sizes=\"auto, (max-width: 1649px) 100vw, 1649px\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group article_sm_block\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>In this article, you have learned how to configure popups for the <a href=\"https:\/\/www.fla-shop.com\/products\/wp-plugins\/united-states\/us\/\">US map plugin<\/a> 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.<\/p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today we will see how to integrate popups by Popup Box plugin with the Interactive US map plugin. What is the Popup Box plugin You can easily configure the popup in WordPress using a simple plugin. In this case, we&#8230;<\/p>\n","protected":false},"author":1,"featured_media":1666,"comment_status":"open","ping_status":"open","sticky":false,"template":"post1.php","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[39],"tags":[],"class_list":["post-1665","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-integration-third-party-plugins"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Easily Show Popups On Maps<\/title>\n<meta name=\"description\" content=\"Popups can be easily created with the Popup Box plugin, and you can set it up so that the popups appear when the user or visitor clicks on the map.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.fla-shop.com\/blog\/easily-show-popups-on-maps\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Easily Show Popups On Maps\" \/>\n<meta property=\"og:description\" content=\"Popups can be easily created with the Popup Box plugin, and you can set it up so that the popups appear when the user or visitor clicks on the map.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fla-shop.com\/blog\/easily-show-popups-on-maps\/\" \/>\n<meta property=\"og:site_name\" content=\"Fla-Shop.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/flashopcom\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-28T12:24:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-12-22T10:24:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/us-map-popup-box.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@flashop\" \/>\n<meta name=\"twitter:site\" content=\"@flashop\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/easily-show-popups-on-maps\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/easily-show-popups-on-maps\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#\\\/schema\\\/person\\\/16214725e757dd92d37dbfe3e2a5db1e\"},\"headline\":\"How To Link The Map To a Popup Box\",\"datePublished\":\"2022-10-28T12:24:37+00:00\",\"dateModified\":\"2022-12-22T10:24:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/easily-show-popups-on-maps\\\/\"},\"wordCount\":540,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/easily-show-popups-on-maps\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/us-map-popup-box.png\",\"articleSection\":[\"Integration with third-party plugins\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/easily-show-popups-on-maps\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/easily-show-popups-on-maps\\\/\",\"url\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/easily-show-popups-on-maps\\\/\",\"name\":\"Easily Show Popups On Maps\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/easily-show-popups-on-maps\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/easily-show-popups-on-maps\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/us-map-popup-box.png\",\"datePublished\":\"2022-10-28T12:24:37+00:00\",\"dateModified\":\"2022-12-22T10:24:11+00:00\",\"description\":\"Popups can be easily created with the Popup Box plugin, and you can set it up so that the popups appear when the user or visitor clicks on the map.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/easily-show-popups-on-maps\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/easily-show-popups-on-maps\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/easily-show-popups-on-maps\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/us-map-popup-box.png\",\"contentUrl\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/us-map-popup-box.png\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/easily-show-popups-on-maps\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How To Link The Map To a Popup Box\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/\",\"name\":\"Fla-Shop.com\",\"description\":\"Interactive Maps, HTML5, WordPress, Map Use-cases \u2013 Fla-shop.com blog\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#organization\",\"name\":\"Fla-shop.com\",\"url\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/06\\\/fla-shop_twitter_logo.jpg\",\"contentUrl\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/06\\\/fla-shop_twitter_logo.jpg\",\"width\":128,\"height\":128,\"caption\":\"Fla-shop.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/flashopcom\\\/\",\"https:\\\/\\\/x.com\\\/flashop\",\"https:\\\/\\\/www.youtube.com\\\/user\\\/flashopcom\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.fla-shop.com\\\/blog\\\/#\\\/schema\\\/person\\\/16214725e757dd92d37dbfe3e2a5db1e\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3bd8fdbd458f1b6c6dc6d8d2dc471f4986c4680b9492a7410ba0cc65f54527c7?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3bd8fdbd458f1b6c6dc6d8d2dc471f4986c4680b9492a7410ba0cc65f54527c7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3bd8fdbd458f1b6c6dc6d8d2dc471f4986c4680b9492a7410ba0cc65f54527c7?s=96&d=mm&r=g\",\"caption\":\"admin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Easily Show Popups On Maps","description":"Popups can be easily created with the Popup Box plugin, and you can set it up so that the popups appear when the user or visitor clicks on the map.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.fla-shop.com\/blog\/easily-show-popups-on-maps\/","og_locale":"en_US","og_type":"article","og_title":"Easily Show Popups On Maps","og_description":"Popups can be easily created with the Popup Box plugin, and you can set it up so that the popups appear when the user or visitor clicks on the map.","og_url":"https:\/\/www.fla-shop.com\/blog\/easily-show-popups-on-maps\/","og_site_name":"Fla-Shop.com","article_publisher":"https:\/\/www.facebook.com\/flashopcom\/","article_published_time":"2022-10-28T12:24:37+00:00","article_modified_time":"2022-12-22T10:24:11+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/us-map-popup-box.png","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_creator":"@flashop","twitter_site":"@flashop","twitter_misc":{"Written by":"admin","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fla-shop.com\/blog\/easily-show-popups-on-maps\/#article","isPartOf":{"@id":"https:\/\/www.fla-shop.com\/blog\/easily-show-popups-on-maps\/"},"author":{"name":"admin","@id":"https:\/\/www.fla-shop.com\/blog\/#\/schema\/person\/16214725e757dd92d37dbfe3e2a5db1e"},"headline":"How To Link The Map To a Popup Box","datePublished":"2022-10-28T12:24:37+00:00","dateModified":"2022-12-22T10:24:11+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fla-shop.com\/blog\/easily-show-popups-on-maps\/"},"wordCount":540,"commentCount":0,"publisher":{"@id":"https:\/\/www.fla-shop.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fla-shop.com\/blog\/easily-show-popups-on-maps\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/us-map-popup-box.png","articleSection":["Integration with third-party plugins"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fla-shop.com\/blog\/easily-show-popups-on-maps\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fla-shop.com\/blog\/easily-show-popups-on-maps\/","url":"https:\/\/www.fla-shop.com\/blog\/easily-show-popups-on-maps\/","name":"Easily Show Popups On Maps","isPartOf":{"@id":"https:\/\/www.fla-shop.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fla-shop.com\/blog\/easily-show-popups-on-maps\/#primaryimage"},"image":{"@id":"https:\/\/www.fla-shop.com\/blog\/easily-show-popups-on-maps\/#primaryimage"},"thumbnailUrl":"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/us-map-popup-box.png","datePublished":"2022-10-28T12:24:37+00:00","dateModified":"2022-12-22T10:24:11+00:00","description":"Popups can be easily created with the Popup Box plugin, and you can set it up so that the popups appear when the user or visitor clicks on the map.","breadcrumb":{"@id":"https:\/\/www.fla-shop.com\/blog\/easily-show-popups-on-maps\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fla-shop.com\/blog\/easily-show-popups-on-maps\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fla-shop.com\/blog\/easily-show-popups-on-maps\/#primaryimage","url":"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/us-map-popup-box.png","contentUrl":"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2022\/10\/us-map-popup-box.png","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/www.fla-shop.com\/blog\/easily-show-popups-on-maps\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.fla-shop.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How To Link The Map To a Popup Box"}]},{"@type":"WebSite","@id":"https:\/\/www.fla-shop.com\/blog\/#website","url":"https:\/\/www.fla-shop.com\/blog\/","name":"Fla-Shop.com","description":"Interactive Maps, HTML5, WordPress, Map Use-cases \u2013 Fla-shop.com blog","publisher":{"@id":"https:\/\/www.fla-shop.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.fla-shop.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.fla-shop.com\/blog\/#organization","name":"Fla-shop.com","url":"https:\/\/www.fla-shop.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fla-shop.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2017\/06\/fla-shop_twitter_logo.jpg","contentUrl":"https:\/\/www.fla-shop.com\/blog\/wp-content\/uploads\/2017\/06\/fla-shop_twitter_logo.jpg","width":128,"height":128,"caption":"Fla-shop.com"},"image":{"@id":"https:\/\/www.fla-shop.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/flashopcom\/","https:\/\/x.com\/flashop","https:\/\/www.youtube.com\/user\/flashopcom"]},{"@type":"Person","@id":"https:\/\/www.fla-shop.com\/blog\/#\/schema\/person\/16214725e757dd92d37dbfe3e2a5db1e","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/3bd8fdbd458f1b6c6dc6d8d2dc471f4986c4680b9492a7410ba0cc65f54527c7?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3bd8fdbd458f1b6c6dc6d8d2dc471f4986c4680b9492a7410ba0cc65f54527c7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3bd8fdbd458f1b6c6dc6d8d2dc471f4986c4680b9492a7410ba0cc65f54527c7?s=96&d=mm&r=g","caption":"admin"}}]}},"_links":{"self":[{"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/posts\/1665","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/comments?post=1665"}],"version-history":[{"count":22,"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/posts\/1665\/revisions"}],"predecessor-version":[{"id":1704,"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/posts\/1665\/revisions\/1704"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/media\/1666"}],"wp:attachment":[{"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/media?parent=1665"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/categories?post=1665"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fla-shop.com\/blog\/wp-json\/wp\/v2\/tags?post=1665"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}