# Before you start
URL: /getting-started/

## Task
Check the requirements for a Web SDK integration and choose an installation path.

## Metadata
- Slug: getting-started-index
- Source: public-docs/getting-started/index.md
- Audience: Engineers starting a Storyteller Web integration
- Platforms: Web
- Related: Script installation, npm installation, React and Next.js, Quickstart

## Overview
- Lists what you need: an API key for your tenant, published Stories or Clips in that tenant, a page element for the view, and Showcase access for the linked code examples.
- Defines the tenant as your organization's Storyteller account and its content.
- Lists the example placeholders: `demo-api-key`, `your-user-id`, `category-id`, and `collection-id`.
- Maps each installation path to a build setup: script tag (no build step), npm (a bundler), or React or Next.js (a component renders the container).
- Explains how to get access to the private Storyteller Web Showcase repository (`getstoryteller/storyteller-showcase-web`). Showcase links return 404 without access.
- Links the first Story row and the configuration guides as next steps.

## When To Use
- Start here when choosing an installation method.
- Use this page to check basic requirements before debugging setup.
- Use the Showcase access section when a Showcase link returns 404.

## Cross-References
- Script installation covers CDN setup, self-hosting, and Content Security Policy.
- npm installation covers package, stylesheet, and TypeScript setup.
- React and Next.js covers one-time initialization and view cleanup.

## Canonical Reference
# Before you start

<!-- markdownlint-disable MD033 -->
<span id="start-a-web-integration"></span>

Check what you need, then choose how to install the Web SDK. Use this page if
you are adding Storyteller to a website for the first time.

You need:

- A Storyteller API key. The key identifies your tenant: your organization's
  Storyteller account and its content. Ask your Storyteller contact for a key,
  or [get in touch](mailto:hello@getstoryteller.com).
- Published content in the same tenant: at least one Story, or a Clips
  collection with published Clips.
- An element on your page, such as a `<div>`, where the SDK can render a view.
- To open the linked code examples, a GitHub account with
  [access to the Storyteller Web Showcase source](#showcase-source-access).

The examples use these placeholders. Replace them with your own values:

- `demo-api-key`: your API key
- `your-user-id`: the ID your site uses for the signed-in user
- `category-id`: the ID of a Story Category
- `collection-id`: the ID of a Clips collection

## Choose an installation path

<span id="script-tag"></span>
<span id="npm"></span>
<span id="react-or-nextjs"></span>

Choose the guide that matches how your site builds its JavaScript:

- [Install with a script tag](script.md): your site has no JavaScript build
  step, so the SDK loads from the Storyteller CDN
- [Install from npm](npm.md): a bundler, such as webpack or Vite, builds your
  JavaScript
- [Use React or Next.js](react-nextjs.md): a React component renders the
  Storyteller container

## Access the Storyteller Web Showcase source {#showcase-source-access}

The Storyteller Web Showcase is a Next.js app that uses the Web SDK. Many guides
link to its source code on GitHub. The repository is private.

To open the Showcase links:

1. Tell your Storyteller contact which GitHub account you want to use, and ask
   them to give that account access.
2. Accept the GitHub invitation.
3. Sign in to GitHub with that account before you open a link.

Until your account has access, Showcase links return a 404 error. If a link
still returns 404, check that you accepted the invitation and that you are
signed in with the account that has access. If you still can't open the source,
contact [support@getstoryteller.com](mailto:support@getstoryteller.com).

!!! abstract "Resources"

    - [Storyteller Web Showcase repository](https://github.com/getstoryteller/storyteller-showcase-web)
    - [Storyteller Web Showcase README](https://github.com/getstoryteller/storyteller-showcase-web/blob/11.0.0/README.md#L1)

<span id="show-content"></span>
<span id="continue-your-integration"></span>

## Next steps

- [Show your first Story row](../Quickstart.md)
- [Choose a view](../views/index.md)
- [Identify and personalize users](../Users.md)
- [Control privacy and tracking](../PrivacyAndTracking.md)
- [Customize themes](../Themes.md)
- [Handle delegates and callbacks](../delegates/index.md)

<!-- markdownlint-enable MD033 -->