Page Summary

outlined_flag

• This quickstart guide details how to build a Google Slides add-on using Apps Script to translate selected presentation text.

• The add-on allows users to select text within their Google Slides presentation and translate it into various languages such as Arabic, Chinese, English, French, German, Hindi, Japanese, Portuguese, and Spanish.

• To utilize this add-on, users need a Google Account, a web browser, and must follow setup instructions which include creating a Slides presentation, enabling Apps Script, and pasting provided code into designated script files.

• Users can run the add-on by reloading their Slides presentation, authorizing the add-on, and selecting the text they wish to translate before clicking the "Translate" button in the add-on sidebar.

This quickstart creates a Google Slides Editor add-onthat translates selected text in a presentation.

Objectives

• Set up the script.
• Run the script.

Prerequisites

To use this sample, you need the following prerequisites:

• A Google Account (Google Workspace accounts mightrequire administrator approval).
• A web browser with access to the internet.

Set up the script

1. Create a Slides presentation atslides.new.
2. ClickExtensions>Apps Script.
3. ClickUntitled project.
4. Rename the Apps Script project toTranslate Slides and clickRename.
5. Next to theCode.gs file, click Moremore_vert>Rename. Name the filetranslate.
6. Click Add a fileadd>HTML. Name the filesidebar.

7. Replace the contents of each file with the following corresponding code, thenclick Save.

   translate.gs

   slides/translate/translate.gs

   View on GitHub

   /** * @OnlyCurrentDoc Limits the script to only accessing the current presentation. *//** * Create a open translate menu item. * @param {Event} event The open event. */functiononOpen(event){SlidesApp.getUi().createAddonMenu().addItem("Open Translate","showSidebar").addToUi();}/** * Open the Add-on upon install. * @param {Event} event The install event. */functiononInstall(event){onOpen(event);}/** * Opens a sidebar in the document containing the add-on's user interface. */functionshowSidebar(){constui=HtmlService.createHtmlOutputFromFile("sidebar").setTitle("Translate");SlidesApp.getUi().showSidebar(ui);}/** * Recursively gets child text elements a list of elements. * @param {PageElement[]} elements The elements to get text from. * @return {Text[]} An array of text elements. */functiongetElementTexts(elements){lettexts=[];for(constelementofelements){switch(element.getPageElementType()){caseSlidesApp.PageElementType.GROUP:for(constchildofelement.asGroup().getChildren()){texts=texts.concat(getElementTexts(child));}break;caseSlidesApp.PageElementType.TABLE:{consttable=element.asTable();for(letr=0;r <table.getNumRows();++r){for(letc=0;c <table.getNumColumns();++c){texts.push(table.getCell(r,c).getText());}}break;}caseSlidesApp.PageElementType.SHAPE:texts.push(element.asShape().getText());break;}}returntexts;}/** * Translates selected slide elements to the target language using Apps Script's Language service. * * @param {string} targetLanguage The two-letter short form for the target language. (ISO 639-1) * @return {number} The number of elements translated. */functiontranslateSelectedElements(targetLanguage){// Get selected elements.constselection=SlidesApp.getActivePresentation().getSelection();constselectionType=selection.getSelectionType();lettexts=[];switch(selectionType){caseSlidesApp.SelectionType.PAGE:for(constpageofselection.getPageRange().getPages()){texts=texts.concat(getElementTexts(page.getPageElements()));}break;caseSlidesApp.SelectionType.PAGE_ELEMENT:{constpageElements=selection.getPageElementRange().getPageElements();texts=texts.concat(getElementTexts(pageElements));break;}caseSlidesApp.SelectionType.TABLE_CELL:for(constcellofselection.getTableCellRange().getTableCells()){texts.push(cell.getText());}break;caseSlidesApp.SelectionType.TEXT:for(constelementofselection.getPageElementRange().getPageElements()){texts.push(element.asShape().getText());}break;}// Translate all elements in-place.for(consttextoftexts){text.setText(LanguageApp.translate(text.asRenderedString(),"",targetLanguage),);}returntexts.length;}

   sidebar.html

   slides/translate/sidebar.html

   View on GitHub

   <html><head>  <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">  <style>    .logo { vertical-align: middle; }    ul { list-style-type: none; padding: 0; }    h4 { margin: 0; }  </style></head><body><form>  <h4>Translate selected slides into:</h4>  <ul></ul>  <div>    <button>Translate</button>  </div>  <h5></h5></form><div>  <img alt="Add-on logo"       src="https://www.gstatic.com/images/branding/product/1x/translate_48dp.png" width="27" height="27">  <span>Translate sample by Google</span></div><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script>  $(function() {    // Add an input radio button for every language.    const languages = {      ar: 'Arabic',      zh: 'Chinese',      en: 'English',      fr: 'French',      de: 'German',      hi: 'Hindi',      ja: 'Japanese',      pt: 'Portuguese',      es: 'Spanish'    };    const languageList = Object.keys(languages).map((id)=> {      return $('<li>').html([        $('<input>')                .attr('type', 'radio')                .attr('name', 'dest')                .attr('id', 'radio-dest-' + id)                .attr('value', id),        $('<label>')                .attr('for', 'radio-dest-' + id)                .html(languages[id])      ]);    });    $('#run-translation').click(runTranslation);    $('#languages').html(languageList);  });  /**   * Runs a server-side function to translate the text on all slides.   */  function runTranslation() {    this.disabled = true;    $('#error').text('');    google.script.run            .withSuccessHandler((numTranslatedElements, element) =>{              element.disabled = false;              if (numTranslatedElements === 0) {                $('#error').empty()                        .append('Did you select elements to translate?')                        .append('<br/>')                        .append('Please select slides or individual elements.');              }              return false;            })            .withFailureHandler((msg, element)=> {              element.disabled = false;              $('#error').text('Something went wrong. Please check the add-on logs.');              return false;            })            .withUserObject(this)            .translateSelectedElements($('input[name=dest]:checked').val());  }</script></body></html>

Run the script

1. In your Slides presentation, reload the page.
2. ClickExtensions>Translate Slides>Start. It might take several secondsfor the add-on menu item to appear.
3. When prompted, authorize the add-on.
4. Again, clickExtensions>Translate Slides>Start.
5. Add text to your presentation and select it.
6. In the add-on, clickTranslate to replace theselected text.

Next steps

• Extending Google Slides with Apps Script
• Slides service reference