---
title: "How to Use the Sleekplan In-App Widget with Action Screen on Mobile Apps — Sleekplan Journal | Sleekplan"
canonical_url: "https://sleekplan.com/blog/how-to-use-the-sleekplan-in-app-widget-with-action-screen-on-mobile-apps"
last_updated: "2026-05-28T16:21:05.434Z"
meta:
  description: "While the action screen feature is currently limited to the widget version, we provide a step-by-step guide to seamlessly integrate it into mobile apps. By creating a blank HTML page and embedding the widget code, developers can now offer users an interactive platform for sharing their thoughts and suggestions. "
  "og:description": "While the action screen feature is currently limited to the widget version, we provide a step-by-step guide to seamlessly integrate it into mobile apps. By creating a blank HTML page and embedding the widget code, developers can now offer users an interactive platform for sharing their thoughts and suggestions. "
  "og:title": "How to Use the Sleekplan In-App Widget with Action Screen on Mobile Apps — Sleekplan Journal | Sleekplan"
---

****

## 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:**

1. Copy the HTML file (e.g., feedback-widget.html) to your app’s assets folder.
2. Create a WebView inside your app’s layout where you want to display the widget.
3. Load the HTML file in the WebView:

```
WebView webView = findViewById(R.id.webView);
webView.loadUrl("file:///android_asset/feedback-widget.html");
```

**For iOS:**

1. Add the HTML file (e.g., feedback-widget.html) to your Xcode project.
2. Create a UIWebView or WKWebView (preferred) in your app’s view controller where you want to display the widget.
3. 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:

<iframe height=“300” style=“width: 100%;” scrolling=“no” title=“Sleekplan Widget Full Width Example” src=“ https://codepen.io/sleekplan/embed/NWELeav?default-tab=html%2Cresult” frameborder=“no” loading=“lazy” allowtransparency=“true” allowfullscreen=“true”> See the Pen <a href=“ https://codepen.io/sleekplan/pen/NWELeav”> Sleekplan Widget Full Width Example</a> by Sleekplan (<a href=“ https://codepen.io/sleekplan”>@sleekplan</a>) on <a href=“ https://codepen.io”>CodePen</a>. </iframe>

LLara·Jul 18, 2023

More from the Journal

[GuidesMar 3, 20261 min Skip Sleekplan widget login for anonymous surveys→](https://sleekplan.com/blog/skip-sleekplan-widget-login-for-anonymous-surveys-4167) [GuidesAug 26, 20255 min How to add CSS to the Sleekplan widget: safely access iframe CSS and style it cleanly→](https://sleekplan.com/blog/how-to-add-css-to-the-sleekplan-widget-safely-access-iframe-css-and-style-it) [GuidesOct 17, 20233 min Streamlining SSO Authentication with Sleekplan Widget: A Browser-Based Approach→](https://sleekplan.com/blog/streamlining-sso-authentication-with-sleekplan-widget-a-browser-based)

Keep up

## New essays land on LinkedIn every Tuesday.

Follow Sleekplan on LinkedIn — we post every new piece there, plus the shorter notes that never make it to the journal.

[Follow on LinkedIn](https://www.linkedin.com/company/sleekplan/)

Done reading? [Try Sleekplan free ](https://sleekplan.com/sign-up)