HomeGuidesAPI ReferenceRelease notes
Log In
Guides

Embed your app

Suggest Edits

Creating and deploying applications is a breeze with SWE’s intuitive application builder.
Here's how you can construct your application and make it accessible to your users directly on your platform:

Step 1: Build your application

Create your SWE application, connect a model, and click Save & publish

📘

See more information

For additional details on developing a new app, please refer to the following link

Step 2: Embed on Your Platform and Make It Available for Your Users

  • After deploying the app, copy the following iframe code and insert your Application ID and API Token.
  • Paste the copied iframe code into the page on your platform where you want the application to appear.
  • Adjust the width and height parameters within the iframe code as needed to fit your webpage's design.
    Here is a code example for your convenience:
import React, { useEffect } from 'react';

export function App() {
  const apiToken = 'YOUR API TOKEN HERE';

  useEffect(() => {
    if (typeof window !== 'undefined') {
      const messageHandler = (event) => {
        if (event.data.type === 'getApiToken') {
          event.source.postMessage(
            {
              type: 'apiTokenResponse',
              apiToken,
            },
            event.origin,
          );
        }
      };

      window.addEventListener('message', messageHandler);

      return () => {
        window.removeEventListener('message', messageHandler);
      };
    }
  }, [apiToken]);

  return (
    <div>
      <iframe
        src="https://app.superwise.ai/app-embed/{YOUR APPLICATION ID HERE}"
        style={{ border: 0 }}
        width="700px"
        height="600px"
        title="Superwise App"
      ></iframe>
    </div>
  );
}

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <iframe
        src="https://app.superwise.ai/app-embed/{YOUR APPLICATION ID HERE}"
        style="border: 0"
        width="700px"
        height="600px"
        title="Superwise App"
      ></iframe>
    </div>
  `,
  styles: [],
})
export class AppComponent implements OnInit, OnDestroy {
  apiToken = 'YOUR API TOKEN HERE';
  messageHandler: (event: MessageEvent) => void;

  constructor() {
    this.messageHandler = (event: MessageEvent) => {
      if (event.data.type === 'getApiToken') {
        if (event.source) {
          (event.source as MessageEventSource).postMessage(
            {
              type: 'apiTokenResponse',
              apiToken: this.apiToken,
            },
            { targetOrigin: event.origin }
          );
        }
      }
    };
  }

  ngOnInit(): void {
    if (typeof window !== 'undefined') {
      window.addEventListener('message', this.messageHandler);
    }
  }

  ngOnDestroy(): void {
    if (typeof window !== 'undefined') {
      window.removeEventListener('message', this.messageHandler);
    }
  }
}

<!DOCTYPE html>
<html>
<head>
    <title>Superwise Embed</title>
</head>
<body>
    <div id="iframe-container">
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const iframeContainer = document.getElementById('iframe-container');
            const iframe = document.createElement('iframe');

            iframe.src = "https://app.superwise.ai/app-embed/{YOUR APPLICATION ID HERE}";
            iframe.width = "700px";
            iframe.height = "600px";
            iframe.title = "Superwise App";

            iframeContainer.appendChild(iframe);

            const apiToken = 'YOUR API TOKEN HERE';

            function messageHandler(event) {
                if (event.data.type === 'getApiToken') {
                    if (event.source) {
                        event.source.postMessage(
                            {
                                type: 'apiTokenResponse',
                                apiToken: apiToken,
                            },
                            event.origin
                        );
                    }
                }
            }

            window.addEventListener('message', messageHandler);
        });
    </script>
</body>
</html>

<template>
  <div ref="iframeContainer">
  </div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
  data() {
    return {
      apiToken: 'YOUR API TOKEN HERE',
      iframeSrc: "https://app.superwise.ai/app-embed/{YOUR APPLICATION ID HERE}"
    };
  },
  mounted() {
    const iframeContainer = this.$refs.iframeContainer;
    const iframe = document.createElement('iframe');
    iframe.src = this.iframeSrc;
    iframe.width = "700px";
    iframe.height = "600px";
    iframe.title = "Superwise App";
    iframeContainer.appendChild(iframe);
    this.messageHandler = (event) => {
      if (event.data.type === 'getApiToken' && event.source) {
        event.source.postMessage(
          {
            type: 'apiTokenResponse',
            apiToken: this.apiToken,
          },
          event.origin
        );
      }
    };
    window.addEventListener('message', this.messageHandler);
  },
  beforeUnmount() {
    window.removeEventListener('message', this.messageHandler);
  }
});
</script>
  • This code sets up an eventListener that listens for messages of type getApiToken.
  • Upon receiving such a message, it responds with the apiToken.

💪

Give It a Try!

You can test the iframe by using the React code example and embedding it in this React playground. Just make sure to insert your Application ID and API key.

Notes:

  • Ensure that your website and the iframe are running on trusted domains to maintain the security of the API token.
  • Adjust apiToken as needed to reflect the actual token used in your application.

Done! Just like that, your application is now live and accessible to your users right within the comfort of your own platform.

Updated 2 months ago