# Website GIF Generator (`powerful_bachelor/website-gif-generator`) Actor

🎥 Website GIF Generator: Capture dynamic, high-quality GIFs of any website with automated scrolling! 🚀 Features timestamps, customizable quality, and batch processing. Perfect for demos, documentation, and marketing. Transform web experiences into engaging visuals with just a URL! ✨

- **URL**: https://apify.com/powerful\_bachelor/website-gif-generator.md
- **Developed by:** [Powerful Bachelor](https://apify.com/powerful_bachelor) (community)
- **Categories:** Automation, Developer tools, Other
- **Stats:** 64 total users, 0 monthly users, 100.0% runs succeeded, 0 bookmarks
- **User rating**: No ratings yet

## Pricing

$20.00/month + usage

To use this Actor, you pay a monthly rental fee to the developer. The rent is subtracted from your prepaid usage every month after the free trial period. You also pay for the Apify platform usage, which gets cheaper the higher Apify subscription plan you have.

Learn more: https://docs.apify.com/actors/running/actors-in-store.md#rental-actors

## What's an Apify Actor?

Actors are web data automations that power AI and operations. They run on the Apify platform to scrape websites, process data, connect APIs, and automate workflows.
In Batch mode, an Actor accepts a well-defined JSON input, performs an action which can take anything from a few seconds to a few hours,
and optionally produces a well-defined JSON output, datasets with results, or files in key-value store.
In Standby mode, an Actor provides a web server which can be used as a website, API, or an MCP server.
Actors are written with capital "A".

## How to integrate an Actor?

If asked about integration, you help developers integrate Actors into their projects.
You adapt to their stack and deliver integrations that are safe, well-documented, and production-ready.
The best way to integrate Actors is as follows.

- **AI agents and MCP clients** — the [Apify MCP server](https://docs.apify.com/integrations/mcp.md) at `https://mcp.apify.com` (remote, streamable HTTP, OAuth on first use).
- **Agentic workflows and local Actor development** — [Agent Skills](https://apify.com/.well-known/agent-skills/index.json) with the [Apify CLI](https://docs.apify.com/cli/docs.md): `npm install -g apify-cli`, then `apify login`.
- **JavaScript/TypeScript projects** — the official [JS/TS client](https://docs.apify.com/api/client/js/docs.md): `npm install apify-client`.
- **Python projects** — the official [Python client](https://docs.apify.com/api/client/python/docs.md): `pip install apify-client`.
- **Any other language** — the [REST API](https://docs.apify.com/api/v2.md).

For usage examples, see the [API](#api) section below.

For more details, see Apify documentation as [Markdown index](https://docs.apify.com/llms.txt) and [Markdown full-text](https://docs.apify.com/llms-full.txt).

# README

## GIF and Video Generator

### 🚀 Overview

GIF and Video Generator is a sophisticated, high-performance tool designed to automatically capture animated GIFs and videos of websites. This powerful utility records full-page scrolling and interactions, transforming them into optimized GIF animations and video files. Perfect for marketers, developers, UI/UX designers, and content creators, it streamlines the process of documenting website appearances and behaviors for presentations, documentation, and visual comparison.

### 🛠 Key Features

- **Automated Scrolling**: Intelligently scrolls through webpages to capture dynamic content and lazy-loaded elements.

- **Batch Processing**: Process multiple URLs concurrently with configurable parallel execution.

- **High-Quality Conversion**: Transform recordings into optimized GIFs and videos with customizable parameters:
  - **Frame Rate**: Adjust frames per second for smooth animations.
  - **Resolution**: Generate media at your preferred dimensions.
  - **Visual Enhancements**: Add timestamps and custom watermarks to your recordings.

- **Comprehensive Capture**: Ensures full-page recording, including:

  - **Lazy-Loaded Content**: Waits for dynamically loaded elements to appear.
  - **Animations**: Captures CSS and JavaScript animations.
  - **Interactive Elements**: Records hover states and dynamic content changes.

- **Versatile Applications**: Perfect for numerous use cases:

  - Creating website demonstrations and tutorials.
  - Documenting UI/UX designs and interactions.
  - Monitoring website changes over time.
  - Building visual libraries of web interfaces.
  - Enhancing marketing materials with animated website previews.

- **Cloud Storage Integration**: All generated GIFs and videos are automatically stored in Apify's key-value store for easy access and sharing.

### 📋 Easy to Start

Getting started with GIF and Video Generator is straightforward:

1. Set up the tool locally or deploy it to Apify.
2. Enter the URL(s) of the websites you want to capture.
3. Configure optional parameters like concurrency.
4. Run the tool and retrieve your generated GIFs and videos.

#### Input Example

Provide the input in JSON format to configure your gif generation task:
If you want to remove the pop up for cookies, then just add a selector with the url just as shown below:

```json
{
    "startUrlsWithCookieSelector": [
        {
            "url": "https://blog.apify.com/how-to-build-an-ai-agent/",
            "selector": "button[class='onetrust-close-btn-handler banner-close-button ot-close-icon']"
        }
    ]
}
```

### Output Example

After successful processing, each URL generates:

1. A WebM video recording of the full scrolling session
2. A converted GIF animation
3. A data record containing links to access the generated media

The output is structured as follows:

```json
{
    "url": "https://example.com/",
    "gifUrl": "https://api.apify.com/v2/key-value-stores/your-store-id/records/example_GIF",
    "webmUrl": "https://api.apify.com/v2/key-value-stores/your-store-id/records/example_WebM",
    "timestamp": "2023-06-15T14:22:33.456Z"
}
```

## 🌟 Conclusion

GIF and Video Generator transforms how you capture and showcase web experiences. By automating website recording and media conversion, it delivers professional results with minimal effort. Try it today to elevate your web content with dynamic, engaging visuals.

Whether for documentation, design comparisons, or marketing materials, this tool provides an efficient solution for visualizing websites in action. Try it today and elevate your web content with dynamic, engaging GIFs and videos. 🎉

# Actor input Schema

## `startUrlsWithCookieSelector` (type: `array`):

Array of website URLs to convert to GIFs. If you want to remove the pop up for cookies, then just add a selector with the url just as shown below:

## `viewportWidth` (type: `integer`):

The width of the viewport.

## `viewportHeight` (type: `integer`):

The height of the viewport.

## Actor input object example

```json
{
  "startUrlsWithCookieSelector": [
    {
      "url": "https://blog.apify.com/how-to-build-an-ai-agent/",
      "selector": "button[class='onetrust-close-btn-handler banner-close-button ot-close-icon']"
    }
  ],
  "viewportWidth": 1280,
  "viewportHeight": 720
}
```

# API

You can run this Actor programmatically using our API. Below are code examples in JavaScript, Python, and CLI, as well as the OpenAPI specification and MCP server setup.

## JavaScript example

```javascript
import { ApifyClient } from 'apify-client';

// Initialize the ApifyClient with your Apify API token
// Replace the '<YOUR_API_TOKEN>' with your token
const client = new ApifyClient({
    token: '<YOUR_API_TOKEN>',
});

// Prepare Actor input
const input = {
    "startUrlsWithCookieSelector": [
        {
            "url": "https://blog.apify.com/how-to-build-an-ai-agent/",
            "selector": "button[class='onetrust-close-btn-handler banner-close-button ot-close-icon']"
        }
    ]
};

// Run the Actor and wait for it to finish
const run = await client.actor("powerful_bachelor/website-gif-generator").call(input);

// Fetch and print Actor results from the run's dataset (if any)
console.log('Results from dataset');
console.log(`💾 Check your data here: https://console.apify.com/storage/datasets/${run.defaultDatasetId}`);
const { items } = await client.dataset(run.defaultDatasetId).listItems();
items.forEach((item) => {
    console.dir(item);
});

// 📚 Want to learn more 📖? Go to → https://docs.apify.com/api/client/js/docs

```

## Python example

```python
from apify_client import ApifyClient

# Initialize the ApifyClient with your Apify API token
# Replace '<YOUR_API_TOKEN>' with your token.
client = ApifyClient("<YOUR_API_TOKEN>")

# Prepare the Actor input
run_input = { "startUrlsWithCookieSelector": [{
            "url": "https://blog.apify.com/how-to-build-an-ai-agent/",
            "selector": "button[class='onetrust-close-btn-handler banner-close-button ot-close-icon']",
        }] }

# Run the Actor and wait for it to finish
run = client.actor("powerful_bachelor/website-gif-generator").call(run_input=run_input)

# Fetch and print Actor results from the run's dataset (if there are any)
print(f"💾 Check your data here: https://console.apify.com/storage/datasets/{run.default_dataset_id}")
for item in client.dataset(run.default_dataset_id).iterate_items():
    print(item)

# 📚 Want to learn more 📖? Go to → https://docs.apify.com/api/client/python/docs/quick-start

```

## CLI example

```bash
echo '{
  "startUrlsWithCookieSelector": [
    {
      "url": "https://blog.apify.com/how-to-build-an-ai-agent/",
      "selector": "button[class='\''onetrust-close-btn-handler banner-close-button ot-close-icon'\'']"
    }
  ]
}' |
apify call powerful_bachelor/website-gif-generator --silent --output-dataset

```

## MCP server setup

```json
{
    "mcpServers": {
        "apify": {
            "type": "http",
            "url": "https://mcp.apify.com/?tools=fetch-actor-details,powerful_bachelor/website-gif-generator"
        }
    }
}

```

The hosted server signs you in with OAuth on first connect, so no API token belongs in this config. Clients without OAuth support can send an `Authorization: Bearer <APIFY_API_TOKEN>` header instead, using a token from API & Integrations in Apify Console (https://console.apify.com/settings/integrations).

## OpenAPI specification

Download the OpenAPI definition: https://api.apify.com/v2/actors/vep7RF1lsfoecnFbY/builds/CcmZqGaynH8sud0l2/openapi.json