# Passing Data

In addition to providing a customizable way to embed Airkit apps into your existing web pages, the SDK also makes it easy to pass information between your Airkit app and your website. Information collected within your application can be used to customize your web page, and visa versa.

Here, we provide a walkthrough of how to pass data between your Airkit apps and your website via Events. **Outgoing** Events send information from your Airkit App to the web page it is embedded in. **Incoming** Events are send information from the embedded environment to the Airkit App. In both cases, data is passed as a JSON object.

## Prerequisite

The following tutorials assume you have already configured an application so that it can be embedded it into an existing web page. You will need to reference to the `SDK_API_URL` associated with this application. For more on how to configure the `SDK_API_URL`, check out the [the SDK Quickstart](sdk-quickstart).

## Outgoing Events

Open your Airkit application and toggle to the **Connections** Builder. Click on the '+' icon to the right of **Embedded Event Sources > Outgoing Events** to add a new Outgoing Event:

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-042ed03de570d65485aa4b7709fb1d317dbdcbbc%2Fpassing-data-v184-0.png?alt=media)

This will allow you to Inspect the new **Embedded Outgoing Event**:

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-f8eca34adfe22d4b1cb2407995d857e16227e9ec%2Fpassing-data-v184-1.png?alt=media)

In the Inspector, click on the '+' icon to the right of **General > Variables** to create the Event Variables that you want to send over to the web page. In our example, we'll be sending two variables, `example_text`, a variable of type `Text`, and `example_number`, a variable of type `Number`.

<figure><img src="https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-554aa3aad868d158aa8f92a82f1a072427488645%2Fpassing-data-v184-2.png?alt=media" alt="" width="300"><figcaption></figcaption></figure>

Under **General > Identifiers > Key**, define the `eventSourceKey` that will be used to reference this Outgoing Event. In our example, we'll use the key `example-outgoing-event`:

<figure><img src="https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-e9438c1b5e83dd470c71f6f8d6743500470bd84f%2Fpassing-data-v184-3.png?alt=media" alt="" width="300"><figcaption></figcaption></figure>

Firing the [Embedded Outgoing Event](../../actions/run-embedded-outgoing-event) as an Action functions similarly to [Running a Data Flow](../../actions/the-run-data-flow-action): you have to run it as an Action in order to fire it, and you need to assign values to the expected variables in order to define the data it acts upon.

Somewhere in your Journey Flow, incorporate the **Run Embedded Outgoing Event** into an Action Chain. Use the previously established `eventSourceKey` (in our example, `example-outgoing-event`) to define which Embedded Outgoing Event to fire. Assign the data that you want to pass to the expected input. In our example, we'l be using two user-defined variables, `text_input` and `number_input`, to define `example_text` and `example_number` respectively:

<figure><img src="https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-6845b709c2d9165b593406e622d404c8d5f2a720%2Fpassing-data-v184-4.png?alt=media" alt="" width="300"><figcaption></figcaption></figure>

Save and publish. Now when the the Embedded Outgoing Event is fired, it will send a JSON object to the web page. This object contains two properties: `"payload"`, under which all input values will be nested, and `"eventSourceKey"`, which contains the `eventSourceKey`. For instance, in our example, the sent JSON object will look as follows:

```json
{
  "payload":{
    "example_text":text_input,
    "example_number":number_input
  },
  "eventSourceKey":"example_outgoing_event"
}
```

Now, let's configure our web page so that it will display not only our Airkit application, but the JSON object it sends.

Copy and paste the following code block into your web page, and:

* Replace `"SDK_API_URL"` with the SDK endpoint configured in the **Triggers** Builder
  * To review how this was configured, see [the SDK Quickstart](sdk-quickstart)
* Replace `"eventSourceKey"` with the value of your `eventSourceKey`

```html
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8" />
    <title>Airkit web SDK</title>
  </head>
  <body>
    <div id="airkit-sdk"></div>
    <div id="message_id"></div>
    <script src="https://client.airkit.com/websdk/1.0/airkit_sdk.js"></script>
    <script>
      const sdk = new window.AirkitWebSDK({ renderMode: "inline" })
      sdk.render({ url: "SDK_API_URL"}) 
      sdk.on("example-outgoing-event", (event) => {
      	const container = document.getElementById("message_id")
      	container.innerHTML = JSON.stringify(event.data)
      	})
    </script>
  </body>
</html>
```

For instance, if our `"SDK_API_URL"` is `"<https://app.airkit.com/event-sdk/sdk"`> and our `"eventSourceKey"` is "`example-outgoing-event"`, our code block will looks as follows:

```html
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8" />
    <title>Airkit web SDK</title>
  </head>
  <body>
    <div id="airkit-sdk"></div>
    <div id="message_id"></div>
    <script src="https://client.airkit.com/websdk/1.0/airkit_sdk.js"></script>
    <script>
      const sdk = new window.AirkitWebSDK({ renderMode: "inline" })
      sdk.render({ url: "https://app.airkit.com/event-sdk/sdk" }) 
      sdk.on("example-outgoing-event", (event) => {
      	const container = document.getElementById("message_id")
      	container.innerHTML = JSON.stringify(event.data)
      	})
    </script>
  </body>
</html>
```

Ship the changes to your website, and you'll see the text of your web page change in response to interactions with your Airkit app:

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-3b435b2c04cd5c3c71e3c1422a2322c99d326316%2Fpassing-data-v184-5.gif?alt=media)

## Incoming Events

Open your Airkit application and toggle to the **Connections** Builder. Click on the '+' icon to the right of **Embedded Event Sources > Incoming Events** to add a new Incoming Event:

<figure><img src="https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-702bc6db4aaa27378b8d5bb6a2854fe4859c17c1%2Fpassing-data-v184-6.png?alt=media" alt="" width="400"><figcaption></figcaption></figure>

Select **Incoming Event Source**:

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-05c1fe488fa98d56e2d7e57a7971194448357523%2Fpassing-data-v184-7.png?alt=media)

Under **General > Identifiers > Key**, define the `eventSourceKey` that will be used to reference this Incoming Event. In our example, we'll use the key `example-incoming-event`:

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-a9bb5457933ae6bda7376f02b196faf3e3f8fe2d%2Fpassing-data-v184-8.png?alt=media)

We have now configured our app so that it can catch Incoming Events. Next, we'll define the Action Chain that will fire when the Incoming Event is caught.

Our example Action Chain will consist only of a [Set Variable](../../actions/the-set-variable-action) Action, which will use the incoming data to define a local variable, a Session Variable we've defined as `session.collected_data`. The incoming data, which we'll define as `variable` in our example, is an [Event Variable](../../../working-with-data/working-with-data-overview/variable-namespaces#event-variables), and thus must be referenced in the `event` namespace:

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-4a2a40b892e5ac402d26f0e580bd406621b3a071%2Fpassing-data-v184-9.png?alt=media)

To display this data after it has been caught as saved, put it in a Label. The data comes in as a JSON object, so use the [TO\_JSON](../../airscript-expressions/datatype-functions/to_json) function to convert it into a string capable fo being displayed by a Label.

<figure><img src="https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-eaa2edc4b28f3b7fd82e991a17043441b95fb4d8%2Fpassing-data-v184-10.png?alt=media" alt="" width="400"><figcaption></figcaption></figure>

Save and publish your application. It will now parse and display data associated with the `eventSourceKey`. Note that the incoming data must be formatted in a way the application expects; in the case of our example, it must be called `variable`.

Next, let's configure our web page so that it can send Events to an embedded implication. We'll do this by creating a button, that, when pressed, sends a message declaring what date it was pressed.

Copy and paste the following code block into your web page, and:

* Replace `"SDK_API_URL"` with the SDK endpoint configured in the **Triggers** Builder
  * To review how this was configured, see [the SDK Quickstart](sdk-quickstart)
* Replace `"eventSourceKey"` with the value of your `eventSourceKey`
* Replace `"VARIABLE_NAME"` with the value used to reference Event Variable when building the Action Chain to associate with the Incoming Event

```html
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8" />
    <title>Airkit web SDK</title>
  </head>
  <body>
    <div id="airkit-sdk"></div>
    <button id="button_id">Send Data</button>
    <script src="https://client.airkit.com/websdk/1.0/airkit_sdk.js"></script>
    <script>
      const sdk = new window.AirkitWebSDK({ renderMode: "inline" })
      sdk.render({ url: "SDK_API_URL" }) 
      const button = document.getElementById("button_id")
    	button.addEventListener("click", () => {
        sdk.dispatch({
          eventSourceKey: "eventSourceKey",
          data: { "VARIABLE_NAME": `Message from web sdk send at ${new Date()}` },
        })
      })
    </script>
  </body>
</html>
```

For instance, if our `"SDK_API_URL"` is `"<https://app.airkitcom/event-sdk/sdk",`> our `"eventSourceKey"` is `"example-incoming-event"`, and our `"VARIABLE_NAME"` is `"variable"`, the code block will looks as follows:

```html
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8" />
    <title>Airkit web SDK</title>
  </head>
  <body>
    <div id="airkit-sdk"></div>
    <button id="button_id">Send Data</button>
    <script src="https://client.airkit.com/websdk/1.0/airkit_sdk.js"></script>
    <script>
      const sdk = new window.AirkitWebSDK({ renderMode: "inline" })
      sdk.render({ url: "https://app.airkit.com/event-sdk/sdk" }) 
      const button = document.getElementById("button_id")
      button.addEventListener("click", () => {
        sdk.dispatch({
          eventSourceKey: "example-incoming-event",
          data: { "variable": `Message from web sdk send at ${new Date()}` },
        })
      })
    </script>
  </body>
</html>
```

Ship the changes to your website, and you'll see the contents of the Label in your app change in response to pressing the button in your web page:

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-83d652e1cf534a2dddf4bd8cb379204737828ece%2Fpassing-data-v184-11.gif?alt=media)
