Google Slides Editor Add-on quickstart

This quickstart creates a Google Slides Editor Add-on that translates selected text in a presentation.


  • Set up the script.
  • Run the script.


To use this sample, you need the following prerequisites:

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

Set up the script

  1. Create a Slides presentation at
  2. Click Extensions > Apps Script.
  3. Click Untitled project.
  4. Rename the Apps Script project to Translate Slides and click Rename.
  5. Next to the file, click More > Rename. Name the file translate.
  6. Click Add a file > HTML. Name the file sidebar.
  7. Replace the contents of each file with the following corresponding code, then click Save Save icon.

     * @OnlyCurrentDoc Limits the script to only accessing the current presentation.
     * Create a open translate menu item.
     * @param {Event} event The open event.
    function onOpen(event) {
          .addItem('Open Translate', 'showSidebar')
     * Open the Add-on upon install.
     * @param {Event} event The install event.
    function onInstall(event) {
     * Opens a sidebar in the document containing the add-on's user interface.
    function showSidebar() {
      const ui = HtmlService
     * 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.
    function getElementTexts(elements) {
      let texts = [];
      elements.forEach((element)=> {
        switch (element.getPageElementType()) {
          case SlidesApp.PageElementType.GROUP:
            element.asGroup().getChildren().forEach((child)=> {
              texts = texts.concat(getElementTexts(child));
          case SlidesApp.PageElementType.TABLE:
            const table = element.asTable();
            for (let y = 0; y < table.getNumColumns(); ++y) {
              for (let x = 0; x < table.getNumRows(); ++x) {
                texts.push(table.getCell(x, y).getText());
          case SlidesApp.PageElementType.SHAPE:
      return texts;
     * 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.
    function translateSelectedElements(targetLanguage) {
      // Get selected elements.
      const selection = SlidesApp.getActivePresentation().getSelection();
      const selectionType = selection.getSelectionType();
      let texts = [];
      switch (selectionType) {
        case SlidesApp.SelectionType.PAGE:
          selection.getPageRange().getPages().forEach((page)=> {
            texts = texts.concat(getElementTexts(page.getPageElements()));
        case SlidesApp.SelectionType.PAGE_ELEMENT:
          const pageElements = selection.getPageElementRange().getPageElements();
          texts = texts.concat(getElementTexts(pageElements));
        case SlidesApp.SelectionType.TABLE_CELL:
          selection.getTableCellRange().getTableCells().forEach((cell)=> {
        case SlidesApp.SelectionType.TEXT:
          selection.getPageElementRange().getPageElements().forEach((element) =>{
      // Translate all elements in-place.
      texts.forEach((text)=> {
        text.setText(LanguageApp.translate(text.asRenderedString(), '', targetLanguage));
      return texts.length;


      <link rel="stylesheet" href="">
        .logo { vertical-align: middle; }
        ul { list-style-type: none; padding: 0; }
        h4 { margin: 0; }
    <form class="sidebar branding-below">
      <h4>Translate selected slides into:</h4>
      <ul id="languages"></ul>
      <div class="block" id="button-bar">
        <button class="blue" id="run-translation">Translate</button>
      <h5 class="error" id="error"></h5>
    <div class="sidebar bottom">
      <img alt="Add-on logo" class="logo"
           src="" width="27" height="27">
      <span class="gray branding-text">Translate sample by Google</span>
    <script src="//"></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([
                    .attr('type', 'radio')
                    .attr('name', 'dest')
                    .attr('id', 'radio-dest-' + id)
                    .attr('value', id),
                    .attr('for', 'radio-dest-' + id)
       * Runs a server-side function to translate the text on all slides.
      function runTranslation() {
        this.disabled = true;
                .withSuccessHandler((numTranslatedElements, element) =>{
                  element.disabled = false;
                  if (numTranslatedElements === 0) {
                            .append('Did you select elements to translate?')
                            .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;

Run the script

  1. In your Slides presentation, reload the page.
  2. Click Extensions > Translate Slides > Start. It might take several seconds for the add-on menu item to appear.
  3. When prompted, authorize the add-on.
  4. Again, click Extensions > Translate Slides > Start.
  5. Add text to your presentation and select it.
  6. In the add-on, click Translate to replace the selected text.

Next steps