The Contact Info Widget on WordPress lets you show your hours, locations, and even your contact information with a map view. This allows you to display your contacts in details in your widget sidebar.
Here is just an example of inserting a Google map when it is activated:
In this tutorial, we will spend time on explaining on how to display Contact Info Widget on WordPress.
To display Contact Info Widget on WordPress
Show a map in the Contact Info Widget
Whenever you insert your widget into your sidebar from the section Customizer, you can notice the widget settings below:
Tittle: You can set the title to get it shown at the top of your widget on the contact information.Address: You can type your full address so thatGoogle Mapscan help you find this. In case you wish to be shown in your widget, you can start enabling Show Map checkbox.Phone: You are able to set your phone number if you want to show it to your customers and visitors.Hour: You can type any text in the box and HTML will be deleted.
In order to show a map in your Contact Info Widget, you can start enabling Show Map checkbox. As you do so, a new section will appear where you can enter your Google Maps API key.
If you want to take your API key, you can go through the instructions on Google Maps documentation. You might have to enable the Google Maps Embed API for the account in your Google API Manager.
As activating the Google Maps Platform API, you need to ensure that you have to check boxes marked Routes, Maps or Places to make sure the maximum compatibility among the location and your website.
To help you create your new API key, it is better to limit the access to your website. If you want to do so, make sure to fill in the second field like the photo below:
After creating your key, you can copy and paste it into the Widget settings in your own WordPress dashboard.
Troubleshooting
In case the app does not appear in your widget since you added the API key, don’t forget to try the following steps:
- Step 1: Open the Google API Manager.
- Step 2: You need to make sure that the correct project is chosen on the top corner of your page.
- Step 3: Press on Enable API located on the top of your page.
- Step 4: Select Google Maps Embed API located under your Google Maps APIs.
If you have difficulties in the map displaying the correct location, you need to type your full address without additional spaces, line breaks and commas in your correct directions. In addition, you are asked to type your address at your Google Maps and notice what your address is, and type that instead. Then, the address appears as a link heading to your correct address on the Google Maps.
Conclusion
With the above article on how to display Contact Info Widget on WordPress, you can easily reach out to your customers or visitors. If you find this article helpful, don’t forget to share this post on your social channels.
