Getting Started

Setting up your Template and Webhook

In order to set up your embed, you must first set up a template (which provides the ruleset to validate your customer's data) as well as an import webhook (which dictates where the imported data will be sent to).

You can see all your current templates by logging into OneSchema and going to the Templates tab in the top left. If you do not have any templates, you can create a new template by uploading a clean CSV. OneSchema will intelligently infer the ruleset of your data from the uploaded CSV, but you should still make sure that each of the column validations match your expected data schema.

All import webhooks are listed under the Webhook tab in the Developer Dashboard. If you want to jump in and get started, we recommend testing using webhook.site to get your webhook url. To actually properly embed OneSchema into your own website, however, your engineering team will need to set up the proper endpoint.

Configuring your importer

Now that your template and webhook are set up, you can get started configuring your importer. Luckily, OneSchema provides a seamless and streamlined process for generating a sample code snippet that you can use to embed OneSchema into your product.

Destination domains

First, specify the destination domains for your importer. This is the domain from which the embed will be hosted (this will usually be your own company's domain). If you want to get started quickly, codepen.io is a great starting point. Note that you will need to add both https://codepen.io and https://cdpn.io in order to test embedded OneSchema with codepen. Once you have configured your domains, click the Importer Quickstart button at the top of the page to continue.

Importer Quickstart

Next, you need to configure your importer. The Importer quickstart page will house all the configurations you need to set up your embed. Choose your template and webhook from the appropriate dropdowns. Then, configure your test JWT. This will all you to test passing in various pieces of meta data into the embed (such as user_email or customer_name).

Once you have your template, webhook, and JWT configured, you're almost done! Simply click the generate snippet button in the bottom right to get a custom snippet with the specified configurations. You can copy this code into codepen to test, or use it as a jumping off point to implement embedded OneSchema into your codebase.

Code Snippet

<script type="text/javascript">
    window.initEmbeddedOneSchema = function() {
      let iframe = document.getElementById("os").contentWindow
      iframe.postMessage({
        messageType: "init",
        templateKey: "<PLACEHOLDER>",
        webhookKey: "<PLACEHOLDER>",
        userJwt: "<PLACEHOLDER>",
      }, "https://embed.oneschema.co")
    }

    window.addEventListener("message", (event) => {
      switch (event.data.messageType) {
        case "complete": {
          console.log("Event ID:", event.data.eventId)
          console.log("Responses:", event.data.responses)
          // TODO: Handle successful completed import
          break
        }
        case "cancel": {
          // TODO: Handle user clicking 'X' to close the embed
          break
        }
        case "error": {
          // TODO: Handle errors
          break
        }
      }
    })
  </script>

  <button onclick="window.initEmbeddedOneSchema()">Launch embed</button>

  <iframe
    id="os"
    width="1200"
    height="700"
    src="https://embed.oneschema.co/embed-launcher?embed_client_id=<PLACEHOLDER>&dev_mode=true"
  >
  </iframe>