This is a simple example of how to add a logo to your document using Google Apps Script.
Is a good feature to add images (don’t use SVG file type) and create an add-on.
First, you need an open document into google drive.
Open Tools – Script editor and start with the scripting area.
Add this source code to Code.gs:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | /* What should the add-on do after it is installed */ function onInstall() { onOpen(); } /* What should the add-on do when a document is opened */ function onOpen() { DocumentApp.getUi() .createAddonMenu() // Add a new option in the Google Docs Add-ons Menu .addItem("Add logo", "showSidebar") .addToUi(); // Run the showSidebar function when someone clicks the menu } /* Show a 300px sidebar with the HTML from googlemaps.html */ function showSidebar() { var html = HtmlService.createTemplateFromFile("AddLogos") .evaluate() .setTitle("Add logos"); // The title shows in the sidebar DocumentApp.getUi().showSidebar(html); } /* This Google Script function inser the logo. */ function insertLogo() { var blob = UrlFetchApp.fetch("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Fedora_logo.svg /267px-Fedora_logo.svg.png").getBlob(); DocumentApp.getActiveDocument() .getCursor() // Find the location of the cursor in the document .insertInlineImage(blob); // insert the image at the cursor } |
Create a new file with File – New – Html file and rename this file with AddLogos.html:
Fill this file with this source code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!-- use CSS stylesheet - default Google Docs styles --> <link href="https://ssl.gstatic.com/docs/script/css/add-ons.css" rel="stylesheet"> <!-- load the jQuery library from the Google CDN --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script> <!-- create sidebar to add logos --> <div class="sidebar"> <img id="fedora_logo" src='https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Fedora_logo.svg/ 267px-Fedora_logo.svg.png' /> <button class="green" id="logo" onclick="google.script.run.insertLogo()">Add Logo</button> <script> $("#logo").click(function() { $("#fedora_logo").google.script.run.insertLogo();; }); </script> </div> |
Run the script and you have a new addon, see Add-ons from the menu and the result:
