The Sleekplan in-app widget allows you to gather valuable feedback and suggestions from your mobile app users, helping you improve your app's functionality and user experience. While the "Action screen" feature is only available for the web in-app widget and not the embedded version or standalone page, we'll guide you through the process of using the widget with an action screen in your mobile app using a local HTML file and the native web view.
Please follow the steps below:
# Step 1: Create an HTML Document
First, you need to create a blank HTML page that will serve as the container for the Sleekplan in-app widget with the action screen.
Here's an example HTML document:
<html>
<head>
<!-- Open the widget -->
<script>
window.document.addEventListener('sleek:init', () => {
$sleek.open();
}, false);
</script>
<!-- Add the widget code -->
<script type="text/javascript">
window.$sleek = [];
window.SLEEK_PRODUCT_ID = 813035424;
(function () {
d = document;
s = d.createElement("script");
s.src = "https://client.sleekplan.com/sdk/e.js";
s.async = 1;
d.getElementsByTagName("head")[0].appendChild(s);
})();
</script>
<!-- Styles -->
<style>
.i-sl-wrapper {
left: 0px!important;
right: 0px!important;
top: 0px!important;
bottom: 0px!important;
width: 100%!important;
border-radius: 0px!important;
}
</style>
</head>
<body></body>
</html>
# Step 2: Load the Widget
In this step, you'll load the Sleekplan widget by embedding the previously created HTML page inside your mobile app.
You can use a WebView to display the HTML page within your app. Depending on the platform you're developing for (Android or iOS), the implementation might differ slightly. Below are some general steps:
For Android:
- Copy the HTML file (e.g., feedback-widget.html) to your app's assets folder.
- Create a WebView inside your app's layout where you want to display the widget.
- Load the HTML file in the WebView:
WebView webView = findViewById(R.id.webView);
webView.loadUrl("file:///android_asset/feedback-widget.html");
For iOS:
- Add the HTML file (e.g., feedback-widget.html) to your Xcode project.
- Create a UIWebView or WKWebView (preferred) in your app's view controller where you want to display the widget.
- Load the HTML file in the WebView:
if let htmlFile = Bundle.main.path(forResource: "feedback-widget", ofType: "html") {
let htmlURL = URL(fileURLWithPath: htmlFile)
let request = URLRequest(url: htmlURL)
webView.load(request)
}
You can find a working example of how to use the Sleekplan widget with an action screen in a mobile app here: