Widgets & Sidebars

Widgets »Contact Info Widget

The Contact Info widget allows you to display your location, hours, and contact information along with an optional map view.

Here’s an example of what it looks like when it’s activated on a blog sidebar:

Once you add the widget to your sidebar from the Customizer, you’ll see the following widget settings:

  • Title – Set the title to be shown at the top of the widget above the contact information. (i.e. Hours & Info, Contact Us, Stop by our Office)
  • Address – Enter your full address so Google Maps can find it. If you’d like a map to be displayed in the widget, follow the instructions here.
  • Phone – Set the phone number as you want it to display to your visitors.
  • Hours – Enter any text in this box.  (HTML will be removed.)

Display a map in the Contact Info Widget

To display a map in the Contact Info Widget, start by enabling the “Show Map” checkbox. When you do so, a new field will appear, where you’ll be able to enter a Google Maps API key.

To get your own API key, you can follow the instructions on the Google Maps documentation. You will need to enable the Google Maps Embed API for your account in the Google API Manager.

When enabling the Google Maps Platform API, make sure to check the boxes marked “Maps,” “Routes,” and “Places” to ensure maximum compatibility between your location and your site.

In creating a new API key, it’s best to restrict access to your site only. To do so, when creating the key, be sure to fill in the second field, like so:

Google Maps API Key restriction

Once you’ve created your key, copy it, and paste it in your Widget settings in your WordPress dashboard.

↑ Table of Contents ↑


If the map doesn’t appear in the widget once you’ve added your API Key, try the following:

  1. Open the Google API Manager.
  2. Make sure the correct project is selected in the top left corner of the page.
  3. Click on “Enable API” at the top of the page.
  4. In the list that appears, choose the “Google Maps Embed API” under “Google Maps APIs”.

If you’re having trouble with the map showing the correct location, be sure you enter your full address with no extra spaces or line breaks, and commas in the correct positions. You can also enter your address at Google Maps and see what the address corrects to, then enter that instead. Your address will appear as a clickable link that goes to your address on Google Maps.

Not quite what you're looking for?

Get Help