The Embedding API can be used to embed a Leap form directly in another webpage without using an <iframe>. The Leap form will be inserted into the DOM of the hosting page and can be interacted with using the Leap JavaScript API or any custom JavaScript. Additionally, the style of items in the Leap form can be customized by the CSS of the hosting page.
<html>
…
<body>
<div id="myLeapDiv"> <!-- Leap form will go here --> </div>
<script src="https://leap.example.com/apps/api/leap.js"
data-leap-config="{launch: {appId: 'e9ec1ed3-c12b-4b5c-8f5e-7a6ff4800a55', formId: 'F_Form1', targetId: 'myLeapDiv'}}">
</script>
</body>
</html>
<html>
…
<body>
<div id="myLeapDiv"> <!-- Leap form will go here --> </div>
<script src="https://leap.example.com/apps/api/leap.js"></script>
<script>
function onLeapFormSubmitted (BO)
{
alert ("submitted record id: " + submittedBO.getDataId());
}
function onLeapFormLoaded (app, launchParams)
{
app.getForm(launchParams.formId).connectEvent("afterSave", onLeapFormSubmitted);
}
Leap.onReady = function() {
var launchParams =
{
appId: 'e9ec1ed3-c12b-4b5c-8f5e-7a6ff4800a55',
formId: 'F_Form1',
target: document.getElementById("myLeapDiv"),
locale: 'fr-FR'
callback: onLeapFormLoaded
};
Leap.launch(launchParams);
};
</script>
</body>
</html>
<script src="https://leap.example.com/apps/api/leap.js" data-leap-config="[leap configuration]" id="leapJS'"></script>
Loading the Leap API will result in the creation of global object named Leap.
After initial load of the leap.js, you can define a Leap.onReady() function which will be called when the necessary Leap resources have been loaded into the page and the API is ready to be used.
To embed a Leap form programmatically, call Leap.launch({launch_params});
{launch_params} properties:
Property | Required? | Description |
---|---|---|
appId | Yes |
The Leap application UUID. For example, 'e9ec1ed3-c12b-4b5c-8f5e-7a6ff4800a55' |
formId | Yes |
The Leap form ID. For example, 'F_Form1' |
targetId | Either target or targetId must be provided. |
The id of the HTML DOM element to embed the Leap form within. For example, 'myLeapFormDiv' |
target | Either target or targetId must be provided. |
The HTML DOM element to place the Leap form within. |
mode | No |
Determines the mode for embedding. Possible values:
|
locale | No |
Indicates the preferred locale for the embedded form. For example, 'fr-FR' |
prefSecMode | No |
If the form supports both anonymous and authenticated usage, this property can be used to automatically choose the preferred security mode. Possible values:
|
callback | No |
A callback function which will be called when the application launch completes successfully and the form is ready to be interacted with. The callback function will be passed the following parameters:
|
If Leap and the hosting page are in different domains, the Leap front-end must be configured to return appropriate CORS headers.