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.

Table of Contents

Contact Info Widget Settings
Display a map in the Contact Info Widget

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

Contact Info Widget

Contact Info Widget Settings

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.)
Contact Info Settings

↑ Table of Contents ↑

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.

Show Map in Contact Info Settings

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 the Customizer.

↑ 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