Support Home > Social > Contact Info Widget

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:

Contact Info Widget

Once you add the widget to your sidebar, you’ll see the following 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.)

Required: A Google Maps API Key

In order to use Google Maps with your Contact Info widget, you’ll need an API key.  Follow these steps to set up your own Google Maps API key:

  1. Follow the instructions on this page.
  2. Enable the Maps Embed API for your key:
    • Go to the API library
    • Search for “Maps Embed API” and select it.
    • Once the description for the API is loaded, click “Enable” at the top of the page.
  1. It’s best to restrict access to your API key to your site only. To do so, follow these instructions:
    • Open this link.
    • Make sure the correct project is selected in the top left corner of the page.
    • Click “Credentials” in the left menu.
    • Select the edit icon for the API key that you’re using for the widget.
    • Follow the instructions provided on the page to restrict your API key to your site. Your website restriction should have the format *.example.com/*, where you replace “example.com” with your domain.
  1. Once you’ve created your key, copy it, and paste it in your Widget settings in your WordPress dashboard.

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 a map in the Contact Info Widget

Troubleshooting

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.

  1. If you see the following error in the widget…

Google Maps Platform rejected your request. This API project is not authorized to use this API.

… then the Maps Embed API has not been enabled for your API key. Follow these steps to enable the API:

  • Open this link.
  • Make sure the correct project is selected in the top left corner of the page.
  • Click on “Enable APIs and Services” at the top of the page.
  • Search for “Maps Embed API” and select it.
  • Once the description for the API is loaded, click “Enable” at the top of the page.

      2.  If the Maps Embed API is enabled and the error message above still displays, check the key’s API restrictions using the following steps:

  • Open this link.
  • Make sure the correct project is selected in the top left corner of the page.
  • Click on “Credentials” in the left menu.
  • Click the edit icon for the API key that you’re using for this widget.
  • Check the API restrictions. If “Restrict key” is selected, ensure that “Maps Embed API” is checked.

     3. If you see the following error in the widget…

Google Maps Platform rejected your request. This IP, site or mobile application is not authorized to use this API key.

… then the restrictions for your API key are not set properly. Follow these steps to check the key restrictions:

  • Open this link.
  • Make sure the correct project is selected in the top left corner of the page.
  • Click on “Credentials” in the left menu.
  • Click the edit icon for the API key that you’re using for this widget.
  • Check that all of the Application restrictions are correct. The website restriction should have the format *.example.com/*, where you replace “example.com” with your domain.

    4. If you see the following error in the widget…

Sorry. We can not plot this address. A map will not be displayed. Is the address formatted correctly?

… there are a few steps you need to take:

  • The API key needs to be removed from the widget and saved as is. You’ll see an error message about API where the map should be now.
  • The restrictions need to be removed from the key in the Google API Console and set to “none” and saved.
  • Billing needs to be enabled with Google
  • Then add the API key back into the widget and save.
  • Once the widget is working, then go back and enter restrictions as follows *.example.com/* just as they provide in their example where you replace “example.com” with your domain.

  • Table Of Contents

  • Categories

  • Contact Us

    Need more help? Feel free to contact us.