SDK Quickstart
Here, we walk through the simplest possible way to insert an Airkit application into an existing web page using the SDK.
Prepare the Application
- Toggle over to the Triggers Builder and click on the '+' icon next to the App APIs branch of the Tree. Select Create SDK API from the menu that appears:
![](https://files.readme.io/362c0a4-Screen_Shot_2022-10-05_at_9.48.11_AM.png)
- Upon creating an SDK API, you will be prompted to define its URL Route. Create a new one by adding subdirectory to the root domain, and then clicking the Create button:
![](https://files.readme.io/4a69744-Screen_Shot_2022-10-05_at_9.50.20_AM.png)
Once created, your new URL Route will be selected automatically from the dropdown list of existing routes:
![](https://files.readme.io/039a3c2-Screen_Shot_2022-10-05_at_9.52.01_AM.png)
- Under Authentication, make sure Enable CORS is checked:
![](https://files.readme.io/3546f69-Screen_Shot_2022-10-05_at_12.25.37_PM.png)
- SDK APIs are automatically come out of the box with a configured SDK endpoint, which is accessible as
{{URL_ROUTE}}/sdk
, whereURL_ROUTE
is the URL Route defined in Step 3. There is no need to modify this endpoint, but you should save its full URL for future reference as theSDK_API_URL
. - Toggle over Settings. Under Integrations, you should see that your API resource is properly configured:
![](https://files.readme.io/b4bd5fe-Screen_Shot_2022-10-05_at_9.54.34_AM.png)
- Under Target Host Names, add the root URL of the web page you intend to add your application to:
![](https://files.readme.io/f4bda8b-Screen_Shot_2022-10-05_at_12.27.27_PM.png)
- Save and publish your application.
Configuring your Website
- Add following block of HTML to your existing web page after replacing
SDK_API_URL
with the endpoint configured earlier in the Triggers Builder:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<title>Airkit web SDK</title>
</head>
<body>
<div id="airkit-sdk"></div>
<script src="https://client.airkit.com/websdk/1.0/airkit_sdk.js"></script>
<script>
const sdk = new window.AirkitWebSDK({ renderMode: "inline" })
sdk.render({ url: SDK_API_URL })
</script>
</body>
</html>
Note that the endpoint must be given as a string:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8" />
<title>Airkit web SDK</title>
</head>
<body>
<div id="airkit-sdk"></div>
<script src="https://client.airkit.com/websdk/1.0/airkit_sdk.js"></script>
<script>
const sdk = new window.AirkitWebSDK({ renderMode: "inline" })
sdk.render({ url: "https://app.airkit.com/sdk-example/sdk"})
</script>
</body>
</html>
- Ship your changes and view your existing web page. Your Airkit application should appear within it.
Updated about 1 year ago