- Call the Lili Create Application API to get the user token
- Embed the Lili UI using the following javascript snippet:
<script src="https://cdn.lili.co/connect.min.js"
data-target-div="lili"
data-external-id="r67864765"
data-token="XXXXXXX"
data-env="Sandbox"
id="lili-onboarding-iframe"></script>- The following parameters are required:
| Parameter Name | Description |
|---|---|
| data-env | Sandbox/Prod - determine which environment to use for the onboarding |
| data-external-id | The partner unique ID, as passed in the Create Application API. Optional. |
| data-target-div | The DIV in which to present the Lili Create Application UI process |
| data-token | The JWT token received from the Create Application API |
- Please note that the script tag must be located before the closing
</body>tag in the HTML document
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lili Embed</title>
</head>
<body>
<h1>Host Lili App Inside Your Page</h1>
<!-- create a target div, where the lili app will appear -->
<!-- The lili app will take the entire size of the target div. in this example we set it to 100vh -->
<div id="lili" style="height: 100vh"></div>
<!-- place this script tag BEFORE the closing </ body> tag -->
<!-- assign attributes -->
<script src="https://cdn.lili.co/connect.min.js"
data-target-div="lili"
data-external-id="r67864765"
data-token="76523465"
data-env="Sandbox" id="lili-onboarding-iframe"></script>
</body>
</html>- The exported JSON file containing the container configuration
- Admin access to the destination Google Tag Manager account
Access Google Tag Manager
- Log in to your Google Tag Manager account
- Navigate to the container where you want to merge the configuration
Import Container
- Click on "Admin" in the top navigation
- In the Container column, click "Import Container"
- Click "Choose container file" and select the provided JSON file
- Select "Merge" as the import option (not "Overwrite")
- Choose "Existing Workspace" or create a new one
- Click "Confirm" to start the import
Review Changes
- After import, review all imported tags, triggers, and variables
- Check for any naming conflicts with existing configuration
- Verify that imported triggers are correctly associated with their respective tags
- Ensure all variables are properly configured
Submit Changes
- Once testing is complete and everything works correctly
- Add a descriptive name and notes for the version
- Click "Submit" to publish the changes
- Verify the changes are live in the published version
Lili Embedded Onboarding is typically integrated into web applications—accessible through both desktop and mobile browsers.
However, some customers prefer to embed the Lili onboarding experience directly into their native mobile applications.
This guide explains how to implement the onboarding flow using the Create Application API within a mobile app.
Use the Create Application API to register the customer’s information with Lili.
The API response will include a field called location.
In your mobile application, open a WebView component and navigate to the location URL.
This URL provides the customer with the full onboarding experience hosted by Lili.
import UIKit
import WebKit
class OnboardingViewController: UIViewController {
var webView: WKWebView!
override func viewDidLoad() {
super.viewDidLoad()
webView = WKWebView(frame: self.view.frame)
self.view.addSubview(webView)
if let url = URL(string: "##location##") {
let request = URLRequest(url: url)
webView.load(request)
}
}
}import android.os.Bundle
import android.webkit.WebView
import androidx.appcompat.app.AppCompatActivity
class OnboardingActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val webView = WebView(this)
setContentView(webView)
webView.settings.javaScriptEnabled = true
webView.loadUrl("##location##")
}
}Once the customer completes the onboarding flow, the WebView is redirected to a URL in the format of 'liliapp://login?email='. Your code should capture this redirect, and close the WebView.
import UIKit
import WebKit
class WebViewController: UIViewController, WKNavigationDelegate {
var webView: WKWebView!
override func viewDidLoad() {
super.viewDidLoad()
webView = WKWebView(frame: view.bounds)
webView.navigationDelegate = self
view.addSubview(webView)
if let url = URL(string: "##location##") {
webView.load(URLRequest(url: url))
}
}
// Intercept navigation actions
func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction,
decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
if let url = navigationAction.request.url {
print("Navigating to: \(url.absoluteString)")
// Detect custom URL scheme
if url.scheme == "liliapp" {
print("liliapp:// redirect detected! Closing WebView...")
self.dismiss(animated: true, completion: nil)
decisionHandler(.cancel)
return
}
}
decisionHandler(.allow)
}
}import android.os.Bundle
import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.appcompat.app.AppCompatActivity
class WebViewActivity : AppCompatActivity() {
lateinit var webView: WebView
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
webView = WebView(this)
setContentView(webView)
webView.settings.javaScriptEnabled = true
webView.webViewClient = object : WebViewClient() {
override fun shouldOverrideUrlLoading(view: WebView?, url: String?): Boolean {
if (url != null) {
println("Navigating to: $url")
// Detect custom URL scheme
if (url.startsWith("liliapp://")) {
println("liliapp:// redirect detected! Closing WebView...")
finish()
return true
}
}
return false
}
}
webView.loadUrl("##location##")
}
}If webhooks are configured via the WebView API, Lili will send updates to your server whenever the customer’s onboarding status changes. Use these updates to track progress and trigger any necessary backend workflows.