How to deploy to Google Sites

Last update:

Audience: System administrators installing and configuring Sapho Server

Sapho supports using your micro apps within your Google Sites environment. Follow these 3 simple steps to set up the integration.

1. Set up G Suite identity provider

In order to get started, you first need to set up your G Suite identity provider in Sapho.

  • Go to the Identity tab and add G Suite identity provider.gs1.png
  • Fill in the relevant information to connect to your G Suite. Click Done.gs2.png
  • Finally, go to the Micro Apps with Access tab in the left side menu within your newly created identity provider and toggle the switch on to activate the Can Access setting for the micro app that you would like to use within Google Sites.gs3.png

Optional, but strongly recommended: whitelist Sapho in the G Suite Admin console, so that your users will not see a permissions confirmation screen when they sign in for first time. To whitelist your app:

  • Open the G Suite Admin Console.
  • Click the Security icon, then click Show More → Advanced Settings → Manage API client access.
  • Enter the OAuth client ID you registered for Sapho. This is the same client ID which you entered for setting up the G Suite identity provider.gs.png
  • In the API Scopes field, type the following string: https://www.googleapis.com/auth/plus.me,https://www.googleapis.com/auth/userinfo.email
  • Click Authorize. The whitelisting will take effect in about 30 minutes.

For additional information, visit this guide.

2. Get the source URL from the Google Sites endpoint

Once the G Suite identity provider is set up, you will need to get the source URL for your micro app from the Google Sites endpoint.

  • Go to the Publish tab and publish the micro app you want to use within Google Sites.gs4.png
  • Navigate to EndpointsGoogle Sites and click the add button.gs5.png
  • Select your micro app and hit Add to enable embedding.gs6.png
  • After configuring your micro app settings for the Google Sites embed, copy the Source URL.gs7.png

3. Set up the Google Sites embed

Finally, you need to configure the embed in Google Sites.

If you’re using the new Sites:

  • Edit the site and page where you’d like to embed your Sapho micro app.
  • Select Embed from the Insert menu.gs15.png
  • Paste the source URL that you obtained earlier from the Google Sites endpoint in Sapho. The embedded micro app will load in the iframe.gs16.png
  • Click Insert.
  • Then click Publish on the top right of the page. Once the page is published, your end users can begin using the micro app right away.gs18.png

 

If you’re using the classic Sites:

  • Edit the site and page where you’d like to embed your Sapho micro app.
  • Open the Insert menu and choose More gadgets… under Gadgets.gs8.png
  • On the dialog, click Public and choose the Include gadget (iframe).gs9.png
  • Hit the Select button.gs10.png
  • In the URL to content field, paste the source URL that you obtained earlier from the Google Sites endpoint in Sapho. gs11.png
  • Adjust display settings if desired.
  • Click Preview Gadget. The sign-in pop will appear. Log in and the embedded micro app will load in the iframe. Click OKgs13.png
  • Then click Save on the top right of the page. gs14.pngOnce the page is published, your end users can begin using the micro app right away.