Sapper Embedded

Introduction

The Sapper embedded implementation gives customers and partners a seamless end-user experience by bringing Sapper's user-friendly interface to build and manage their integrations right from their own product. Our full embedded connections widget allows all pages and components on the Sapper platform to be embedded within an iframe built into the customer's platform UI.

1 Introduction
2 Overview
- 2.1 Key points
- 2.2 Benefits
- 2.3 Steps to Implement Sapper Embedded

Overview

Key points

The integration between Sapper and the customer platform is done via iframe. It's a native way to embed one web app into another through a browser.
We also provide the Sapper embedding client script that is meant to simplify synchronization between Sapper (embedded via iframe) and the customer's web application/product.

Benefits

We provide you the ability to build your own integrations, by ensuring entire authority over your customer accounts as per their requirements.
You will get the most seamless transition from your product to Sapper embedded in your own UI.

Steps to Implement Sapper Embedded

Sapper tenant/account admin needs to generate tokens to embed Sapper widgets into your platform. To generate tokens, you need to navigate to the embedded token option from my account.
Click on the generate token, and the below form will appear on the screen. Now provide the name & generate the token. Please ensure that this token is completely secured & do not disclose it to anyone.
Client Script
Here is the client script which you needs to add to your web application:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Sapper</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <style type="text/css">
          html {
                overflow: auto;
  }
  html,
  body,
  div,
  iframe {
      margin: 0px;
      padding: 0px;
      height: 100%;            
      border: none;
    }
  iframe {  
     display: block; 
     width: 100%;
     border: none;
     overflow-y: hidden;
     overflow-x: hidden;
    }
   </style> 
</head>
<body>
   
   
iframe src=" https://automation-test.sapper.ai/#/embedded/automation?token=<handshake token>"
          frameborder="0" 
          marginheight="0" 
          marginheight="0"  
          width="100%" 
          height="100%"  
          scrolling="no">
  </iframe>
  </body>
  </html>

4. Generate handshake token

In the above code, you just need to generate & pass <handshake token> dynamically. The validity of the handshake token is 2 hours.

Here are the API details to generate the handshake token. We recommend generating a handshake token through the backend so that the main token is not exposed to the end-user.

API URL	https://automation-test.sapper.ai/handshake	This is the API URL to generate the handshake token.
Method	GET	GET is used to fetch something from the server.
Query Parameter	uniqueyouId	You can provide any unique id. Sapper will track all the actions against this id for audit.
Header Parameter	adminemail adminPassword token	adminEmail - The email id of the Sapper tenant admin. adminPassword – The password used to login into the Sapper account. token – The token is generated in the first step.
Response	{ "expiryTime": 1631690654234, "token": "<handshake token value>" }	expiryTime - Handhake token will expire at the mentioned time. It is in UTC. token field - The value of handshake token. You need to pass this value in the embedded script.