--- title: "Web app widget builder" description: "" url: https://support.onde.app/en/articles/13610166-web-app-widget-builder collection: "Web App" updated: 2026-11-05 language: en --- # Web app widget builder Our widget builder allows you to create a custom [Web app](https://support.onde.app/en/articles/6169283-web-app-solution-overview.md) and place it on your website with utmost ease and efficiency.  To access the widget builder, go to your company panel » Applications and services » Web app » Customise your widget: ![Applications & services screen shows the Web app section, with red arrows pointing to Applications & services in the sidebar and Customize your widget. Visible: Applications & services, Web app, Free, Go to Web App, Customize your widget, White label app.](https://staticfiles.gleap.io/ghelparticle/TAaf9TuEHq9YKl7H2dYKT029QvelDJW6aZHAV4ePxXArUR57F2RbC1aAXY9B6kuUV8bNJPFzELL.png) The widget builder page is divided into two sections: 1. Side menu with a multitude of configuration options on the left 2. The visualisation of the Web app on the right Let us go through the side menu and the options to create one’s own custom Web app. Mind that every detail you specify in the Side menu instantly reflects on the Web app form on the right. ### **Web app type** Choose the type of your Web app: - Regular (for ride services) - Delivery (for delivery services) - On-demand (for on-demand services with no drop-off address) ![Web App section shows a free browser-based ordering app with a QR code, iOS and Android buttons, and a widget builder preview. Visible: Web App, Free, Order now, Pick-up location, Drop-off location, See prices.](https://staticfiles.gleap.io/ghelparticle/ZaZo5eUTQzKbMeDj4Pqcmu1amfyhlUU1ijBaJUKS5pvunUmCPipjvkANuuqI6dO5lbL9Un3XZNP.png) ### **Language** Specify the language you want your Web app to be shown to your website customers. It can be either the user’s browser language or any of the languages available in the drop-down list.  ![Widget builder with the Language dropdown expanded beside a desktop taxi-booking preview; a red arrow points to the dropdown’s up-chevron. Visible: Widget builder, Web app type, Regular, Language, User’s browser language, Search.](https://staticfiles.gleap.io/ghelparticle/Bsf1YVLxMbPvUvU7o0FNceygwWDdPaikkY3wVONH5xYVr6CAyIY3UVsWZPbqQmUp360jLJWnyQT.png) ### **Widget title**   Adjust the default “Order now” title to any custom one which suits your business best. ![Widget builder settings beside a desktop ride-booking preview; red arrows connect the Widget title field to the “Get your ride” preview heading. Visible: Widget builder, Web app type, Regular, Language, User’s browser language, Widget title.](https://staticfiles.gleap.io/ghelparticle/sj4xzSbxE92BKbQfTQkrEZQdsg9FzaKLvVSSjRElfRLEoHKNzmqT6LDIIlzgvj77rWdaalEcUbi.png) ### **Widget height (px)** Specify your Web app height. The minimum default height is 450 px. This is to leave enough space for address suggestions when entering pick-up and drop-off locations. The widget automatically fills the full width of the space available on the page where it’s embedded. We recommend making the widget full-width.  ![Widget builder settings show a desktop booking widget preview, with a red arrow pointing to the 450 px widget height field. Visible: Widget builder, Web app type, Regular, Language, User’s browser language, Widget title.](https://staticfiles.gleap.io/ghelparticle/F4eBsBZvyFc8qds7Q9YSm6h39e4Bdo5c1zgahM1dq6iMt1Dz02IRwM0k1Vpqiz9xOpXQZLWHrLu.png) ### **Prefilled pick-up location (optional)**  Prefill the pick-up address if your Web app will be placed at a specific location with predefined pick-up, e.g. Airport.  ### **Prefilled drop-off location (optional)**  Prefill the drop-off location if you want the Web app to show a particular drop-off address. For instance, if you need to encourage rides to a certain event taking place in a specific location.  ![Widget embed settings show prefilled pick-up and drop-off location fields; red arrows point to both fields, beside an Order now preview. Visible: Language, User’s browser language, Widget title, Order now, Widget height (px), 450.](https://staticfiles.gleap.io/ghelparticle/vlscDMoIeBoST9iquzZQg0Bs5wpzvW40ImmdfhQZejRagOJLSN9DxwMyNZpAFvnDHAyaXQZpIPL.png) ### **Promotional message (optional)**  Add a catchy promo message to draw your customers’ attention.  ![An order-widget editor shows the Promotional message field and a website preview with the message beneath the See prices button; red arrows point to both. Visible: Prefilled pick-up location, Warsaw Chopin Airport (WAW), Warszawa, Prefilled drop-off location, Enter an address, Promotional message, U](https://staticfiles.gleap.io/ghelparticle/e0JgdYIUW6hhL1FIOQs4fT4XBCA39gZsG4h4QZAajujpL224GKKOQ6UtssN9kDU1joTuaBe2uOy.png) ### **Image** Select one of the four available images to best reflect your service.  ### **Custom image URL** Paste a direct link to your own custom image. The image should be hosted on an external website and publicly accessible without signing in. It will replace the selected image and be cropped to fit beside the form.  ![The Desktop booking-widget editor highlights image thumbnail choices and points to the custom image URL field beside an airport pickup preview. Visible: Desktop, Tablet, Mobile, Prefilled pick-up location, Warsaw Chopin Airport (WAW), Warszawa, Prefilled drop-off location.](https://staticfiles.gleap.io/ghelparticle/P6ZxuyYS6qF2utezxrwyGWk58KE93TDx2PaQFFrBINqC3N3k2J6c5phNX7IphpJiFcoFu5YArkM.png) ### **Show download links for Customer app** Enable this toggle only if you have an Onde Customer app. ### **App download title** Replace the default “Even better in the app” title with any that you feel can encourage your users to download the app from stores.  ### **App Store link** ### **Google Play link**  Add both your App Store and Google Play links to create one download link that automatically opens the right store based on the user’s device.  ![Website embed editor shows customer-app download settings on the left and an order booking page preview with an app download banner on the right; red arrows point to the toggle, title, store links, banner heading, and QR code. Visible: Upfront prices - no surprises, Image, Custom image URL, Show dow](https://staticfiles.gleap.io/ghelparticle/zdCj0EnQer87hiPAovtT3ezseJNyeB5mUAepG1e6LznOyes8jWZdQdKx46epSWHXjskd1nvQEzA.png) ### **My website requires sandboxing** Sandboxing limits what embedded content can do on your website. Select this only if your website administrator requires it. We’ll add the permissions the widget needs to work properly. Keep them unchanged to avoid issues with features such as location access and price display. ### **Open Web app in a new tab** Enable this if you want the Web app to be opened in a new browser tab. Now that you have preset your custom Web app, you can check how your customers will see it on different devices. Switch between **Desktop, Tablet and Mobile** tabs at the top of the widget to visualise the display on the specific device.  ![The embed editor shows a mobile preview of the order page, with the Mobile device option highlighted in red and an arrow pointing toward it. Visible: Upfront prices - no surprises, Image, Custom image URL, Enter your image URL here, Show download links for Customer app, App download title.](https://staticfiles.gleap.io/ghelparticle/ZulvPibG7aRQzFANG5gtW3X7ZoPCgWojEkkDpm8wkQRYlGxLhliLnZNsiuLq4ilhGLKmvJ0vh8X.png) If you are happy with the setup and visualisation, tap on the **“Get embedded code”** button for the code to be generated. ![Embed builder settings and Desktop website preview show an airport ride order form and app QR section; red arrow points to Get embed code. Visible: Upfront prices - no surprises, Image, Custom image URL, Show download links for Customer app, App download title, Even better in the app.](https://staticfiles.gleap.io/ghelparticle/UYoZfQoU9WNNW0Ipcx6VLuJSjTsKAMSAmDSATN2ldi4249cjjm39O9BTn9gCpXnbnPU0obfzmXL.png) On the “Get embed code” pop-up window, tap on the **“Copy code”** button. ![A “Get embed code” modal overlays the website widget editor, showing iframe code; a red arrow points to the “Copy code” button. Visible: Upfront prices - no surprises, Desktop, Tablet, Mobile, Get embed code, Copy code.](https://staticfiles.gleap.io/ghelparticle/m3So09dLdwDi6Pk9qQGmriQeFrnnuFTolYJQUU2XSDpBDnHzLWvwnaQqMQ3x5zIw3fSMnLJMc4p.png) Please review the sections below on the “Get embedded code” pop-up window. ### **Content Security Policy settings** This section states that one should allow the widget’s domain in one’s CSP, keeping existing allowed domains. ### **Widget Terms of Use** This section states that adding the widget means accepting the Terms of Use and provides the specifics. ### **Need help with the widget** The section gives replies to frequently asked questions and redirects to [support@onde.app](https://mailto:support@onde.app) for further consult. ![A “Get embed code” modal overlays the website widget editor, with red arrows pointing to the expand chevrons for three settings sections. Visible: Get embed code, Copy code, Content Security Policy settings, Widget Terms of Use, Need help with the widget?, Get embed code.](https://staticfiles.gleap.io/ghelparticle/tXuV3Sm83OYPUzMsZBloRXIGWk2AQO6TegonDyM3RH93PwSWboQot4pW4kGvH3CVGKprvCCIUUD.png) Add this code to your website or share it with your website manager.  ![Kerb homepage shows ride pickup and drop-off fields, a See prices button, ride statistics, a yellow taxi, and an app download QR code. Visible: Kerb, Ride, Drive, Business, About, Help.](https://staticfiles.gleap.io/ghelparticle/RfQbnpKEgoTllskZBGzpMlloF89889y3TwRlMxUhGyWWFnutK7iKDgCdgtu2DRynzMT2HzwLQ0v.png) In case you need to place two different Web apps on two websites — for example, one for regular service and the other for on-demand -  you can create them via the widget builder and use separate codes for each website. Do not forget to replace the code whenever you change the settings in the widget builder. Enjoy the modern view and efficiency of the custom Web app you created, blending perfectly with your website!