Embedding a Google Form or Map

This article explains how to embed Google elements into a custom website builder page

Overview

Adding elements to your website like a Google Form or Google Maps can be a great tool to provide more ways for your customers to interact with your business online. A Google Form, for example, could include satisfaction surveys, customer feedback, or a contact form so existing or potential customers can directly send over any questions without having to navigate outside of your website. And a Google Maps section can give your customers a quick geographic view of your location(s) at a glance, even before they enter the booking flow.

Embedding a Google element is a relatively simple process. The most important part for a Google Form is setting it up to best suit your needs. There are many ways to approach and design your custom Form, including prebuilt templates offered by Google. It is crucial to test out your form to make sure it is configured correctly prior to incorporating it into your webpage.

Follow the steps below to add a Google element to your website:

1. You must first give your Storeganise account permission to display the content from Google.
   1. Navigate to your Main Settings and go to the Developer tab.
   2. In the Custom CSP section, add the following line to the frame-src field and click Save:

2. Go to the Website section of the Main Settings and select the Page where you want to embed your Google element.
3. Add a new Block and place it within the layout of your webpage as desired. For these elements it is easiest to utilize the text1 block type.

4. Edit the block, add a Title, and configure the other settings as desired.

5. Now you will navigate to the Google element that you will be embedding. This is done by copying the associated <iframe> HTML.

• Google Form instructions:
  • From within the Google Form page, click on the Send button.

• Select the < > tab and click on the Copy button.

• Google Maps instructions:
  • Navigate to the address you want to embed and click the Share button.

• Select Embed a map and click on COPY HTML.

6. With your desired <iframe> HTML code copied, simply paste this content within the Text field of the block from the previous steps.

• Google Form example:
  • Paste the code and save the block.

• NOTE: The block will likely not display in the editing window and say "This content is blocked. Contact the site owner to fix the issue." - this is expected behavior and does not reflect the live site.

• Google Maps example:
  • Paste the code and save the block.

7. Save the webpage you are editing. Now you can navigate to your live page and review your newly embedded Google element.

• Google Form example:

• Google Maps example: