htmlpolymerweb-componentgoogle-sitesgoogle-sites-2016

How can I add custom content to the NEW Google Sites


I want to be able to add content that is served by my own server to a page on a NEW(December 2016) Google Sites site. The only way I can see of adding custom content is the 'Insert > Embed URL' option in the right hand sidebar.

I have requested support from the folks at Google G-Suite but they have provided little information, apart from suggesting that I use OpenGraph markup.

If I add a link with an image marked up with 'og' meta tags the image is displayed, which is progress, but I would like to display other content, i.e. some html that is served by my own server.

I see that the new Sites uses a version of Polymer under the covers - it would be ideal for me to serve a Polymer web component in the embedded link but I haven't been able to make that work.

Any ideas please?


Solution

  • You can use Google Apps Script now for this.

    I don't know exactly what you were trying to embed, but a simple implementation is to create a google apps script project with a gs file and an html file.

    //my-gs-file.gs
    function doGet(e) {
        return HtmlService
               .createTemplateFromFile('my-html-file')
               .evaluate(); 
    }
    <!-- my-html-file.html-->
    <!DOCTYPE html>
    <html>
        <head>
            <base target="_top">
        </head>
        <body>
            <p>Hello world</p>
        </body>
    </html>

    You can use javascript (with some restrictions) and google apps script for gsuite stuff https://developers.google.com/apps-script/reference/calendar/, external APIs https://developers.google.com/apps-script/guides/services/external, etc

    This is also worth a read https://developers.google.com/apps-script/guides/html/best-practices

    I should add that this example assumes you'll go on to develop the html template with scriptlets etc, but if it's only ever going to be plain html, then the gs file need only contain the line

    return HtmlService.createHtmlOutputFromFile('my-html-file')