# Add subtitle, chapters, and thumbnails to video uploads

[View original](https://ittybit.com/guides/subtitles-chapters-thumbnails)

## The Workflow

### Overview

This workflow generates [subtitles](/docs/subtitles), [chapters](/docs/chapters), and [thumbnails](/docs/thumbnails) in a single task.

***

### Build Workflow

<Workflow
  workflow={[
  {
    kind: 'subtitles',
    next: [
      {
        kind: 'webhook',
        url: 'https://example.com/webhooks/ittybit',
      },
    ],
  },
  {
    kind: 'chapters',
    next: [
      {
        kind: 'webhook',
        url: 'https://example.com/webhooks/ittybit',
      },
    ],
  },
  {
    kind: 'thumbnails',
    next: [
      {
        kind: 'webhook',
        url: 'https://example.com/webhooks/ittybit',
      },
    ],
  },
]}
/>

<Callout type="info">
  <Icon icon="info" />

  <p>
    A [workflow](/docs/workflows) is an array of task definitions that describe
    what should happen and in what order.
  </p>

  <p>
    Tasks in the array run in parallel. You can also chain tasks together in
    sequences using the `next` property.
  </p>
</Callout>

***

### Automatic Upgrade

Behind-the-scenes, ittybit will upgrade this to extract the data each subtask requires, without you having to do anything.

<Workflow
  workflow={[
  {
    kind: 'speech',
    next: [
      {
        kind: 'subtitles',
        next: [
          {
            kind: 'webhook',
            url: 'https://example.com/webhooks/ittybit',
          },
        ],
      },
    ],
  },
  {
    kind: 'outline',
    next: [
      {
        kind: 'chapters',
        next: [
          {
            kind: 'webhook',
            url: 'https://example.com/webhooks/ittybit',
          },
        ],
      },
    ],
  },
  {
    kind: 'thumbnails',
    next: [
      {
        kind: 'webhook',
        url: 'https://example.com/webhooks/ittybit',
      },
    ],
  },
]}
/>

***

### Create Task

We create a new task with the `kind: "workflow"`.

The `workflow` property contains our workflow steps as defined above.

<Tabs groupId="language" items={["typescript", "python", "ruby", "php", "go", "fetch" ]} persist>
  <Tab value="typescript">
    ```ts
    const task = await ittybit.tasks.create({
      url: "https://example.com/your-video.mp4",
      kind: "workflow",
      workflow: workflow
    })
    ```
  </Tab>

  <Tab value="python">
    ```python
    task = ittybit.tasks.create({
      url="https://example.com/your-video.mp4",
      kind="workflow",
      workflow=workflow
    })
    ```
  </Tab>

  <Tab value="ruby">
    ```ruby
    task = ittybit.tasks.create({
      url: "https://example.com/your-video.mp4",
      kind: "workflow",
      workflow: workflow
    })
    ```
  </Tab>

  <Tab value="php">
    ```php
    $task = $ittybit->tasks->create([
        'url' => "https://example.com/your-video.mp4",
        'kind' => "workflow",
        'workflow' => workflow
    ]);
    ```
  </Tab>

  <Tab value="go">
    ```go
    task, err := ittybit.Tasks.Create(
        context.TODO(),
        &ittybit.TaskCreateParams{
            Kind: "workflow",
            URL: "https://example.com/your-video.mp4",
            Workflow: workflow
        },
    )
    ```
  </Tab>

  <Tab value="fetch">
    ```js
    const task = await fetch('https://api.ittybit.com/tasks', {
      method: 'POST',
      headers: { 'Authorization': `Bearer ${ITTYBIT_API_KEY}` },
      body: JSON.stringify({ 
        url: "https://example.com/your-video.mp4",
        kind: "workflow",
        workflow: workflow
      })
    })
    ```
  </Tab>
</Tabs>

***

### Handle Webhook

Your webhook handler should parse the [File Object](/docs/files) payloads and save the data in your database.