# Using the Zyte IDE

![image](zyte-api/ide/images/open-ide.png)

To open the **Zyte IDE**, select **Zyte API › Zyte IDE** in the sidebar of the
[Zyte dashboard](https://app.zyte.com/).

The **Zyte IDE** lets you:

- [Write](#zapi-new-script), [debug](#zapi-debug-script),
  and [deploy](#zapi-deploy-script) browser scripts, written using
  our [TypeScript](https://www.typescriptlang.org/) [scripting API](api/index.md#zapi-scripting-api), to use as
  [actions](../usage/browser.md#zapi-actions) in [browser requests](../usage/browser.md#zapi-browser).
- Build Zyte API requests visually, and debug existing requests.

## Zyte IDE requirements

To use the Zyte IDE you need a modern browser.

You also need to enable third-party cookies on the `zyte.group` domain. If
your browser blocks them, you will see an error like the following:

> Error loading webview: Error: Could not register service workers:
> NotSupportedError: Failed to register a ServiceWorker for scope …

## Browser script advantages

Browser scripts are written using the [scripting API](api/index.md#zapi-scripting-api), a [TypeScript](https://www.typescriptlang.org/) API to expose [Zyte API actions](../usage/browser.md#zapi-actions).

The main advantage of browser scripts over action sequences is support for a
non-linear flow: [TypeScript](https://www.typescriptlang.org/) allows using conditional statements, loops, and so
on. For example, in a browser script you can check if an element is present in
a webpage, and run different actions depending on that.

Browser scripts also allow accessing [iframe](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) elements through
[`Page.getIframe()`](api/index.md#Page.getIframe).

## `src/` and `dist/`

On the ![Explorer](zyte-api/ide/images/explorer.png) [Explorer](https://code.visualstudio.com/docs/getstarted/userinterface#_explorer) view of the [Zyte IDE](#zyte-ide) you get 2
folders:

- `src/` is the development folder, where you [develop](#zapi-new-script) your browser scripts.

  Changes to this folder are saved on the Zyte IDE cloud storage system.

  Multiple developers can work on this folder at the same time, and see the
  work of one another in real time.
- `dist/` is the deployment folder.

  It contains files built from the last version of `src/` that has been
  [deployed](#zapi-deploy-script) to Zyte API.

  You should never write anything in the `dist/` folder, all its contents
  are removed during [deployment](#zapi-deploy-script).

## Creating a new script

To create a new browser script:

1. Open the [Zyte IDE](#zyte-ide).
2. Select ![Application Menu](zyte-api/ide/images/menu.png) (top-left corner) **› File › New File…**.
3. On the **Create New…** dialog, select **Smart Browser Interaction**.
4. On the **Use Case** dialog, select one of the following:
   - One of the [special action interaction classes](api/index.md#zapi-special-action-interactions), to extend it in your new
     script.
   - **Others**, to create a script from scratch.
   - **Utils**, to create a file with utility code that you can reuse from
     browser scripts and other utility code files.
5. On the **Domain** dialog, enter the domain of the website for which you are
   writing the script (e.g. `toscrape.com`).

A TypeScript file is created in the `src/` folder based on your input data,
and will open on a tab of the Zyte IDE.

For example, if you select the **Others** use case and the `toscrape.com`
domain, a `src/Others/toscrape.com.ts` file is created with the following
content:

```typescript
import { BaseInteraction, Page } from "smartbrowser-core-interactions/index.ts";

interface Args {
    // add your arguments here
    // arg1: string;
}

export default class Interaction extends BaseInteraction {
    domains = ["example.com"];
    async do(page: Page, args: Args): Promise<void> {
        // implement your logic here
    }
}
```

You can now use the [scripting API](api/index.md#zapi-scripting-api) to implement
your browser script, and then [debug](#zapi-debug-script) and,
eventually, [deploy](#zapi-deploy-script) that browser script.
To get started, try out our our [example browser scripts](examples/index.md#zapi-browser-script-examples)!

## Debugging a script

After you [create an interaction class](#zapi-new-script), you can run
your interaction class on a webpage from the [Zyte IDE](#zyte-ide) to see
how it works:

1. Select ![Run Smart Browser Interaction](zyte-api/ide/images/run.png) (top-right corner).
2. On the **URL** dialog, enter a target URL (e.g. `https://toscrape.com`).
3. On the **Interaction Parameters(in JSON)** dialog, enter a JSON object of
   arguments for your interaction class. You can leave it empty to pass no
   parameters.

On pressing Enter, the Zyte IDE view splits vertically, and on the right-hand
view a tab loads a tool, **Smart Browser DevTools**, which runs your
interaction against the specified URL, showing you the result in real time, and
offering you debugging tools and data.

When your interaction finishes, an “execution finished” message pops up on the
bottom-right corner.

Once your interaction class is working as expected, you can [deploy it](#zapi-deploy-script) and [use it](#zapi-use-script) as a
[browser action](../usage/browser.md#zapi-actions) in your [data extraction requests](../usage/browser.md#zapi-browser).

## Completing our Know Your Customer procedure

While all Zyte API features are available to every customer, the following
features are disabled by default:

- [Custom script deployment](#zapi-deploy-script)
- [Setting ipType to residential](../usage/features.md#zapi-residential)
- CDP headless browser

Unless you are on a [free trial](../pricing.md#zapi-trial), you can enable these
features by completing our [Know Your Customer](https://en.wikipedia.org/wiki/Know_your_customer) (KYC) procedure.

> [!TIP]
> If you are on an [Enterprise plan](../pricing.md#enterprise-plans), you have
> already completed our Know Your Customer (KYC) procedure.

To start your KYC application:

1. Open the [Zyte IDE](#zyte-ide).
2. Select ![Zyte Smart Browser Devtools](zyte-api/ide/images/zyte.png) on the [Activity Bar](https://code.visualstudio.com/docs/getstarted/userinterface) (left-hand side).
3. On the **Zyte IDE** side view that opens, under **Deploy**, click the
   **Request Access** button.
   > [!TIP]
   > If you see a **Deploy** button instead, you have probably already
   > passed our KYC procedure.
4. Fill and submit the form that opens.

Once our legal team has reviewed your application, we will notify you the
outcome. If approved, you will instantly get access to all previously disabled
features.

## Deploying your changes

You can [debug scripts](#zapi-debug-script) from the [Zyte IDE](#zyte-ide), but to [use them](#zapi-use-script) as [browser
actions](../usage/browser.md#zapi-actions) in your [data extraction requests](../usage/browser.md#zapi-browser) you must first deploy your changes to Zyte API.

To deploy all your changes to Zyte API:

1. Select ![Zyte Smart Browser Devtools](zyte-api/ide/images/zyte.png) on the [Activity Bar](https://code.visualstudio.com/docs/getstarted/userinterface) (left-hand side).
2. On the **Zyte IDE** side view that opens, click the **Deploy** button.
   > [!TIP]
   > If you see a **Request Access** button instead, see [Completing our Know Your Customer procedure](#kyc).

The deployment process empties the `dist/` folder, builds files from the
`src/` folder into the `dist/` folder, and deploys the files in the
`dist/` folder to Zyte API.

## Using a script with Zyte API

Once you have [deployed a script](#zapi-deploy-script),
you can get the interaction ID as follows:

1. Select ![Zyte Smart Browser Devtools](zyte-api/ide/images/zyte.png) on the [Activity Bar](https://code.visualstudio.com/docs/getstarted/userinterface) (left-hand side).
2. On the **Zyte IDE** side view that opens, under **Interactions**,
   right-click on your interaction, and click **Copy Interaction ID**.

The interaction ID will be copied to your clipboard.

You can then invoke your script as a [browser action](../usage/browser.md#zapi-actions)
from your [data extraction requests](../usage/browser.md#zapi-browser):

1. Set the `action` field to `"interaction"`.
2. Set the `id` field to the interaction ID from your clipboard.

For example, if your interaction ID is `Others-toscrape.com`,
use:

```json
{
    "action": "interaction",
    "id": "Others-toscrape.com"
}
```

To pass arguments to your script, set the `args` field to an object. That
object is passed to your script as the *args* parameter of
[`BaseInteraction.do()`](api/index.md#BaseInteraction.do). For example:

```json
{
    "action": "interaction",
    "id": "Others-toscrape.com",
    "args": {
        "foo": "bar"
    }
}
```