Your engineering team can embed OneSchema directly into your own web application by following these steps:

Setup your embedded domains and embed token

In your own OneSchema portal, navigate to /settings. Here you need turn on embedding by specifying which domains you will embed OneSchema on. You can provide multiple domains, and also specify wildcard domains. If your dev environments include port numbers those can also be specified as well. Your embedded domains may look something like: yourcompany.com, *.yourcompany.com, yourdevserver.com.

When enabling embedding, you will also get an embed token. This token will be specified as a URL param when opening an <iframe> to oneschema.co.

Configure a webhook export endpoint, and a Template

Configure a webhook export endpoint, also on the /settings page, and give the Template the customer will use to configure their data a key to be used later.

Create an iframe to [embed.oneschema.co](<http://embed.oneschema.co>) on your web app

To embed OneSchema in your web application, create an <iframe> element with a src URL pointing to embed.oneschema.co/embed-launcher?embed_token=<embed_token>.

You can (and should) create the iframe before the user initiates their import flow. This will reduce the time it takes for the embedded site to load.

Tell [embed.oneschema.co](<http://embed.oneschema.co>) to start the embedded session

Use [postMessage](<https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage>) to send an object to tell the embedded version of OneSchema to start a session. This object must contain the field messageType: "init". It also must contain a field userToken to indicate the user accessing the product. ****This should be an opaque string that will be returned during the webhook export. You can also specify a list of templateKeys to specify which Templates the user should use, and an opaque metadata key that will also be returned during the webhook export.

<iframe
  id="embedded-oneschema"
  src="<https://embed.oneschema.co/embed-launcher?embed_token=><embed_token>"
>

// JavaScript
let iframe = document.getElementById("embedded-oneschema").contentWindow
let postMessage = {
  messageType: "init",
  userToken: "25638",
  templateKeys: ["deal-flow"],
  // Use this to send any additional metadata you want to use later
  metadata: '{"trace_id":8502325,"embed-init-action":"sidebar"}',
}
iframe.postMessage({ messageType: "init" }, "<https://embed.oneschema.co>")

At this point you should configure the iframe with position: fixed; height: 100%; width: 100%. The embedded OneSchema will render itself as a modal, but also allow clicks to passthrough to your own app.

When the user is finished with their import flow, a webhook request will be sent to your configured webhook. The userToken and metadata tokens will be included with each request.