How to render Google Slides as scrolling screenshots with ScreenshotOne

By default, you can not render Google Slides as scrolling screenshots with the ScreenshotOne API. But if you managed to export it as HTML, you can make it work.

Make Google Slides available as HTML

To make Google Slides available as HTML, you need to export it as HTML from the Google Slides editor.

I created a simple example Google Slides presentation to demonstrate how to do that.

(1) For you presentation, go to share settings:

(2) Change the settings to make the presentation public and shareable:

After that you can use either Google Slides API or make the link shareable and public to everyone and then modify it to the link like: https://docs.google.com/presentation/d/<presentation id>/export/html

Download the HTML with any HTTP client, but the following example uses is written in TypeScript:

// validate URL
const presentationUrl = new URL(url);
if (!presentationUrl.hostname.includes("docs.google.com")) {
    throw new Error("Invalid URL: Must be a Google Slides presentation URL");
}

// Extract presentation ID from the Google Slides URL
const match = presentationUrl.pathname.match(/presentation\/d\/([\w-]+)/);
if (!match) {
    throw new Error("Invalid Google Slides URL format");
}

const presentationId = match[1];
const exportUrl = `https://docs.google.com/presentation/d/${presentationId}/export/html`;
url = exportUrl;

console.log(`Downloading Google Slides presentation from: ${url}`);
const response = await axios.get(url, {
    headers: {
        "User-Agent":
            "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36",
    },
    maxContentLength: Infinity,
    maxBodyLength: Infinity,
    timeout: 60000, // increase timeout to 60 seconds
});
const html = response.data;

if (typeof html !== "string") {
    throw new Error("Failed to get HTML content from Google Slides: Response data is not a string");
}

Render HTML as scrolling screenshots

Get your ScreenshotOne API key at the ScreenshotOne dashboard.

And then implement the following example in TypeScript or any other language you want:

// Prepare ScreenshotOne API parameters
const params: Record<string, string> = {
    html: html,
    access_key: SCREENSHOTONE_ACCESS_KEY as string,
    format: "mp4",
    scenario: "scroll",
    delay: "2", // wait for 2 seconds before starting to scroll
};

const apiUrl = `https://api.screenshotone.com/animate`;
console.log("Making request to ScreenshotOne API...");

// Make request to ScreenshotOne API
const screenshotResponse = await axios({
    method: "post",
    url: apiUrl,
    data: params,
    headers: {
        "Content-Type": "application/json",
    },
    responseType: "stream",
    maxContentLength: Infinity,
    maxBodyLength: Infinity,
    timeout: 60000, // increase timeout to 60 seconds
});

// Process the video

Notice that we use a POST HTTP request to the https://api.screenshotone.com/animate endpoint. Because the request might be large and might not fit into the URL.

The resulting video will be something like:

A working example

You can find a fully working example (written in Node.js/TypeScript) in the ScreenshoOne integration examples directory.

Suggestions

1. If possible, use the official Google Slides API to get the HTML. It is more reliable and easier to use.
2. If you build this solution for third-party use, consider if you can automate the processing of authentication with Google Slides and extract the HTML.

Support

In case you have any questions or suggestions, feel free to reach out at support@screenshotone.com.