How to Embed a Widget in Adalo
Adalo lets you build mobile and web apps without code. Its WebView component renders any URL as an inline web view within your app screens. Paste your Embeddy widget URL to add live, interactive content to your Adalo app — no custom coding required.
On this page
Prerequisites
Before embedding, make sure you have the following ready:
- An Embeddy widget: Create one for free at embeddy.ai/dashboard. Your widget must be published so it is publicly accessible.
- Your Embed Link: Copy the Embed Link URL from the Embeddy dashboard:
https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID. - An Adalo app: Free or paid plan. The WebView component is a standard component available on all plans.
Native vs Web app: The WebView component works in both Adalo's native mobile apps (iOS/Android) and web apps. On native, it uses the platform's native WebView. On web, it renders as an iframe.
Method 1: WebView Component
Recommended — built-in, works on all platforms
- 1
Open your Adalo app in the editor
Navigate to the screen where you want to add the widget.
- 2
Add a WebView component
Click the "+" button in the left panel to add a component. Search for "WebView" (sometimes listed under "Simple" components) and drag it onto your screen.
- 3
Set the URL
In the component's properties panel on the left, set the URL to your Embeddy Embed Link:
https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID
- 4
Resize the WebView
Drag the edges of the WebView component to set its size on the screen. For a full-screen experience, make it fill the entire screen area below the header.
- 5
Preview the app
Click Preview to see the widget in action. On the preview device, the WebView will load and display your Embeddy widget.
Tip: You can make the URL dynamic by binding it to a property from your Adalo database. This lets each list item or record display a different widget.
Method 2: Custom Component (Marketplace)
Alternative — for advanced embed features
The Adalo Marketplace offers custom-built components that may provide enhanced WebView or iframe features — such as better scroll handling, custom headers, or JavaScript injection.
- 1
Browse the Adalo Marketplace
Click the "+" button, then Marketplace. Search for "webview" or "iframe" to find enhanced WebView components.
- 2
Install and add the component
Install the marketplace component and add it to your screen. Configure it with your Embeddy Embed Link URL.
- 3
Set the URL
Paste your Embeddy Embed Link in the URL field:
https://embeddy.ai/webhost/WIDGET_ID?widget_props_id=PROPS_ID
Note: Marketplace components may have additional costs or limitations. The built-in WebView component (Method 1) works well for most Embeddy widget use cases.
Sizing & Positioning
Full-Screen WebView
For the best experience, make the WebView fill the entire screen (minus the navigation bar). This gives your widget maximum space and avoids scroll conflicts.
Partial Screen
You can also place the WebView as a smaller element alongside other components. Set a fixed height (e.g., 400px) to keep it contained within the screen layout.
Dynamic URL: Bind the WebView URL to a field in your Adalo database to show different widgets based on the current record. For example, each list item could load a unique widget.
Limitations
Scroll conflicts on mobile
When the WebView is placed inside a scrollable screen, scrolling the page and scrolling within the WebView can conflict. Use a full-screen layout or a dedicated tab for the WebView to minimize this issue.
Native app WebView limitations
On native iOS/Android apps built with Adalo, the WebView uses the platform's built-in WebView engine. Some advanced CSS or JavaScript features may behave differently than in a desktop browser. Embeddy widgets are tested to work in standard WebView environments.
No iframe code option (WebView accepts URL only)
Adalo's WebView component accepts a URL — not raw HTML or iframe code. Use the Embed Link (direct URL), not the iframe snippet.
Widget must be publicly accessible
Your Embeddy widget must be published and set to public. The WebView loads the URL directly and cannot pass authentication credentials.
Troubleshooting
WebView shows blank white screen
Common causes:
- Widget not published. Publish it in the Embeddy dashboard.
- URL missing or malformed. Ensure the full URL is entered correctly, starting with https://.
- Preview limitation. Some WebView rendering may not work in the Adalo editor preview. Try previewing on a real device or in a browser.
Scrolling issues on mobile
If the widget is inside a scrollable page, users may have difficulty scrolling the widget vs. the page. Fix this by making the WebView fill the entire screen, or use a dedicated screen/tab for the widget.
Widget looks different on iOS vs Android
Minor rendering differences between iOS WKWebView and Android WebView are normal. Embeddy widgets are designed to be responsive and should work well on both platforms. If you notice major issues, test the Embed Link URL directly in a mobile browser to isolate the problem.
Still stuck? Reach out on Discord or contact support.
FAQ
Does this work with Adalo's free plan?
Yes. The WebView component is a standard component available on all Adalo plans including free.
Does the WebView work in native mobile apps?
Yes. On iOS, Adalo uses WKWebView. On Android, it uses the system WebView. Both render Embeddy widgets correctly. The web app version uses a standard iframe.
Can I show a different widget per list item?
Yes. Store the Embeddy Embed Link URL in a field in your Adalo database. Bind the WebView's URL property to that field. Each list item or detail screen will then display the correct widget.
Will the widget update automatically?
Yes. The WebView loads from the live URL. Changes published in the Embeddy dashboard are reflected immediately in your Adalo app.
Ready to embed your widget?
Head to your Embeddy dashboard to create or find your widget, copy the Embed Link, and add it to your Adalo app with a WebView component.