Presentations are a great opportunity to explain your work to a new audience and receive valuable feedback. A vital aspect of a presentation is keeping the audience’s attention which is generally quite tricky I have found (from experience).

One thing that I have noticed other presenters using, which has helped maintain my focus, is an indication of the progression of the presentation. Including in your slides information that there are only a few slides remaining, encourages the listeners to keep their focus for a little longer.

Instead I will show you how to do it using Apps Script, Google’s cloud platform that allows you to write JavaScript code which can work with its online products such as Docs or Slides.

1) Open your Google Slides you are working on and select App Script from the Extensions tab.

2) This should open up a new tab with an untitled project .gs file. This is where we will put our code to generate a progress bar.

3) Set up script with environment variables and necessary functions

• Here we give a label for our progress bar (for debugging) and can define its height in pixels.

const BAR_ID = 'PROGRESS_BAR_ID';
const BAR_HEIGHT = 10; // px

• We need to also define a event for when the slides is open so that we can add our progress bar options when the Slides document is opened.
• The function takes the event (e) as input to check that it is correct (opening the document instead of closing it, for example) and adds a menu with functions we can link to.
• The functions we will define should match the second string, for example createBars. If your function names differ to these, change that part of the code.

function onOpen(e) {
  SlidesApp.getUi().createAddonMenu()
      .addItem('Show progress bar', 'createBars')
      .addItem('Hide progress bar', 'deleteBars')
      .addToUi();
}

• We will also allow an installation event to be handled when we first add these functions to our Slides application. All this function needs to do is add the other functions into the UI.

function onInstall(e) {
  onOpen();
}

4) Add function to create progress bar

• This function, named ‘createBars’, is what we use to create our progress bar.
• Its job is to delete any progress bars (see step 5) and to add a proportion of the width of the slide to each slide relative to their total count. It does this by creating a simple rectangle object and then iterating through each slide to defines its length.

function createBars() {
  deleteBars(); // Delete any existing progress bars
  const presentation = SlidesApp.getActivePresentation();
  const slides = presentation.getSlides();
  for (let i = 0; i < slides.length; ++i) {
    const ratioComplete = (i / (slides.length - 1));
    const x = 0;
    const y = presentation.getPageHeight() - BAR_HEIGHT;
    const barWidth = presentation.getPageWidth() * ratioComplete;
    if (barWidth > 0) {
      const bar = slides[i].insertShape(SlidesApp.ShapeType.RECTANGLE, x, y,
          barWidth, BAR_HEIGHT);
      bar.getBorder().setTransparent();
      bar.setLinkUrl(BAR_ID);
    }
  }
}

5) Add final function to remove progress bar

• The final function to define is to ‘deleteBars’, which removes any existing progress bar in the document.
• It does this by checking each element’s shape in each slide and whether they have the BAR_ID as their LinkURL. If it gets a match, the function deletes it from the presentation.

function deleteBars() {
  const presentation = SlidesApp.getActivePresentation();
  const slides = presentation.getSlides();
  for (let i = 0; i < slides.length; ++i) {
    const elements = slides[i].getPageElements();
    for (const el of elements) {
      if (el.getPageElementType() === SlidesApp.PageElementType.SHAPE &&
        el.asShape().getLink() &&
        el.asShape().getLink().getUrl() === BAR_ID) {
        el.remove();
      }
    }
  }
}

6) Add functionality to your document

Now you have created the code, you can install it. Press the Run button on the project to ensure the code is working. You may need to allow access for your Google account as it could come up with a security warning, don’t worry the code is safe!

The image above shows how to access your new functions and how the progress bar looks in the slideshow. You can alter the code to change its appearance!