Your engineering team can embed OneSchema directly into your own web application by following these steps:
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, also on the /settings
page, and give the Template the customer will use to configure their data a key to be used later.
iframe
to [embed.oneschema.co](<http://embed.oneschema.co>)
on your web appTo 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.
[embed.oneschema.co](<http://embed.oneschema.co>)
to start the embedded sessionUse [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.