# Setting up a new webapp

## How Webapps Are Embedded

Webapps run inside an iframe and are embedded into host pages using [kasko-js](https://docs.kasko.io/kasko-api-documentation/kasko-js/kasko-js), a JavaScript SDK. The basic embedding looks like:

```html
<div id="kasko-app"></div>
<script src="https://js.kasko.io/v2/kasko.js"></script>
<script>
Kasko.Setup({
  key: 'pk_test_xxxxx',      // Your publishable key
  touchpoint: 'tp_xxxxx',    // Your touchpoint ID
  mode: 'webview',
  container: 'kasko-app'
});
</script>
```

See the [kasko-js documentation](https://docs.kasko.io/kasko-api-documentation/kasko-js/kasko-js) for all configuration options including data prefilling, event callbacks, and display modes.

## As a 3rd party

To start, we need to create all the database entities required for a new product: items, touchpoints, payment providers, contents, etc. Most likely this will be done by the KASKO team and you should receive only the `touchpoint id`, `public key`, `plugin id` and `private key` for publishing the application to KASKO platform. Please reach out to the KASKO team if you are missing any of these!

Afterward, you can proceed with cloning either the [external example app](https://github.com/kasko/kasko-app-example-external) (react). This will serve as the base for the project.

Assuming that the [external example app](https://github.com/kasko/kasko-app-example-external) will be used as the base, these are the next steps:

1. create `.env` file and copy `.env.example` file's content to it
2. change the `WEBAPP_PUBLIC_KEY` variable in `.env` file (maybe `WEBAPP_LANGUAGE` as well)
3. change product id and integration id in `product.json` file
4. change project name in `package.json` and `README.md`
5. start developing!

Further information - how to test, lint and deploy the code can be found in `README.md` of the [external example app](https://github.com/kasko/kasko-app-example-external) project.

## As a KASKO employee

Warning: this guide is targeted to internal KASKO developers.

## Step-by-step guide

1. Create a new repository
   * Open [fe-projects-tf](https://github.com/kasko/fe-projects-tf)
   * Copy & paste the [webapp TF template](https://github.com/kasko/fe-projects-tf/blob/master/example-web-app.md) into a new webapp file (the filename must follow this pattern: `*-web-app`)
   * Commit the file and create a new PR
   * Once the PR is approved and merged, follow on to step 2
2. Copy the demo app
   * Open the [example app](https://github.com/kasko/kasko-app-example)
   * Copy & paste all the files & folders to the newly created repository
   * Commit the initial codebase in a feature branch
   * Create a PR (this PR should have NO custom changes; it should be just copy\&paste)
   * Get your new webapp's plugin id and change it in `kasko.yaml` file
   * Once the PR is approved and merged, follow on to step 3
3. Develop
   * This is where the fun begins :)

But before you do - remember to change the application name in `README`, `package.json` and other files as well as the touchpoint ID and public key in `.env.example`.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.kasko.io/kasko-frontend-documentation/getting-started/setting-up-a-new-webapp.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.