--- title: "How to use Onde's web widget builder" description: "Find out how the web booking widget works and learn to use Onde's widget builder." url: https://help.light.onde.app/en/articles/52-how-to-use-onde-s-web-widget-builder collection: "Web booking app" updated: 2026-11-06 language: en alternates: [es] --- # How to use Onde's web widget builder Find out how the web booking widget works and learn to use Onde's widget builder. **Onde's** [**Web app**](https://app.gleap.ai/projects/69dd27d67f0be2d6d8110089/helpcenter/collections/6ae22d279b3a0e1209f4a5a1/articles/6ae347c1e8b38c3f27f2c743) **lets your customers place orders in their browser without downloading anything to their phone. With a web booking widget, you can build the same ordering experience directly into your website.**  ## Opening the widget builder Our widget builder allows you to create a custom widget that is linked to your Web app.  To access the widget builder, take your default Web app URL and add **/widget/builder** after it. For example, if we use the demo mode Web app URL, the link will look like this: [https://demo.ondelight.app/widget/builder](https://demo.ondelight.app/widget/builder)  Alternatively, go to **My hub→Applications & services→Web app** and press the **Customize your widget** button. The widget builder page is divided into two sections: 1. Side menu with configuration options on the left 2. Visualisation of the Web app on the right ## Customizing your widget Let’s get familiar with the configuration options and create your own web widget. Mind that every detail you specify in the side menu will be instantly reflected on the widget on the right. 1\. **Web app type** Depending on the service you provide, choose the Web app type from the list: - Regular (for ride services) - Delivery (for delivery services) - On-demand (for on-demand services with no drop-off address) ![Widget builder settings show the Web app type dropdown set to Regular, with a desktop website order form preview on the right. Visible: Widget builder, Web app type, Regular, Delivery, On-demand, Order now.](https://staticfiles.gleap.io/ghelparticle/pEp73gL1P00kDhAjMFnY10pixFc1QsbteeTHHVMIuut4Rcz7miqfwLUEAzuTCnJsVmVRZOGqiYj.png) 2. **Language** Specify the language you want the widget to appear in to your website visitors. It can be either the visitor’s browser language (determined automatically) or any language available in the drop-down list.  ![Widget builder shows the Language dropdown expanded with “User’s browser language” selected; a red arrow points to the dropdown chevron. Visible: Widget builder, Web app type, Regular, Language, User’s browser language, Search.](https://staticfiles.gleap.io/ghelparticle/WPXb8XbabbXY6vvfW3lYuZfVG8sDF4xWqs2i4dyaSEoGrzP4NOQtqZ2HuCoWsmlXHFZPxTcXV2m.png) 3. **Widget title**   Edit the default title “Order now” to suit your preferences. ![Widget builder settings show a ride-booking widget preview on Desktop; red arrows connect the Widget title field to the “Get your ride” heading. Visible: Widget builder, Web app type, Regular, Language, User’s browser language, Widget title.](https://staticfiles.gleap.io/ghelparticle/guui7Cki76pd0c2sLERlLRjhDurtlzVDR1Q1osMNQZrGwoVbaeiD9dWWt6jPtm5MzMa525Cd876.png) 4. **Widget height** Specify the desired widget height. The minimum default height is set at 450px. This is to leave enough space for address suggestions when the customer enters pick-up and drop-off locations. As for width, the widget is designed to take up the full width available in the space where you embed it. This parameter can be adjusted on your own web page. We recommend leaving the widget full-width.  ![Widget builder shows configuration fields on the left and a desktop booking widget preview with pickup and drop-off fields, price button, and taxi photo; a red arrow points to the 450-pixel height value. Visible: Widget builder, Web app type, Regular, Language, User’s browser language, Widget title.](https://staticfiles.gleap.io/ghelparticle/37EW0srK5uZd0VgDUgo3gvzfIBqzNWvfh4c4YNnSLXw3iLpDEuKsSlcs1EpUCE3q0u9rr9aZpOA.png) 5. **Prefilled pick-up and drop-off locations (optional)**  In some cases, it makes sense to pre-fill the pick-up or drop-off location for your customers.  For example, an airport transfer company could set the airport as the permanent pick-up location. On the other hand, an event company might want to simplify booking for event attendees by pre-filling the drop-off spot. ![Widget settings screen shows prefilled pick-up and drop-off location fields, with red arrows pointing to them, beside a desktop booking widget preview. Visible: Language, User’s browser language, Widget title, Order now, Widget height (px), 450.](https://staticfiles.gleap.io/ghelparticle/CK7q1sjy2yjHfgfUrnlHrq8q4wmRYiD8v2Zg2hkL3ojXhpDIJCqoDNwQJPfVgI4j8RjL9bK04DS.png) 6. **Promotional message (optional)**  Add a catchy promo message to draw your customers’ attention.  ![Ride-booking widget editor and desktop preview show the promotional message field, with red arrows pointing to “Upfront prices - no surprises” beneath the See prices button. Visible: Prefilled pick-up location, Warsaw Chopin Airport (WAW), Warszawa, Prefilled drop-off location, Enter an address, Pro](https://staticfiles.gleap.io/ghelparticle/sDhrbz5O1MQBWMK3NLqvqH601agVaBBI0QYHyeL8licf5FN6wTybmkzgk1qyzvphWFTOfSUrDmx.png) 7. **Image** Select one of the available images to represent your service in the widget.  Alternatively, you can paste a direct link to your own custom image in the **Custom image URL** field. The image should be hosted on an external website and publicly accessible without signing in. If the link you paste is correct, you will see your custom image appear in the preview on the right, cropped to fit beside the form.  ![Website booking widget editor shows image thumbnails with the airport pickup photo selected and a red arrow pointing to the Custom image URL field. Visible: Minimum 450px, Prefilled pick-up location, Optional, Warsaw Chopin Airport (WAW), Warszawa, Prefilled drop-off location, Enter an address.](https://staticfiles.gleap.io/ghelparticle/pK6tTMJzeLVnkqN2uXVsr3GFCjCQPnKTLByRottkMbWeMoXCU3KHo1UtizcZBSZ65yAnPn2Mw5M.png) ## **Configuring app links and display options** - **Toggle: “Show download links for Customer app”** Enable this toggle **only** if you have an Onde Customer app. You’ll see a few additional settings appear. ![](https://staticfiles.gleap.io/ghelparticle/IDcpj7zxSNGvG3igbpT7QrXnbBTGYXpDGTqErasOWVLtjP2U4tVweGNSsWtFerLqMrtu9N4nlVV.png) **a. App download title** You can replace the default “Even better in the app” title with a custom one to encourage your users to download the app.  **b. App Store link and Google Play link**  Put in the App Store and Google Play links into the respective fields. You’ll see a QR code appear in the preview on the right. This QR code will automatically direct your desktop customers to the right store for their device. Note that on tablets and smartphones, your customers will see a button instead of a QR code. ![](https://files.gleap.io/pf/gattachments/69dd27d67f0be2d6d8110089-w9h7yPT0NHLfODqDBzOhzbQot8BxGbWJcHCs6cufOExoFf9AxZQUueamtPEnX5ZDWzJEVlSfZtn.png?v=1&k=a&s=api&e=1794441600&sig=zuol2n7ol2KA-UlTQQrNgNGhIGzW4ZzPpSa63mRw6pQ) - **Toggle: “My website requires sandboxing”** Sandboxing limits what embedded content can do on your website. Select this option only if your website administrator requires it. When you select the toggle, the widget builder will add the necessary permissions to the embed code of your widget. Keep them unchanged to avoid issues with features such as location access and price display. - **Toggle: “Open Web app in a new tab”** Enable this if you want the Web app to be open in a new browser tab. ## **Last checks** Now that you have preset your custom widget, you can check how your customers will see it. Switch between **Desktop, Tablet** and **Mobile** tabs at the top of the preview section to visualise the display on a specific device.  ![](https://staticfiles.gleap.io/ghelparticle/leNp6yyHcMkjjEbokQZAkaqwdVhlWEbqE2iI8IRARKnvfeXugOCTNOROwgvpJR4B6ZZLkS2fsqZ.png) If you are happy with the setup and visualisation, tap the **Get embed code** button. ![The booking-widget editor shows image and app-download settings beside a desktop preview; a 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/pTeGEuVlw2CQcJ8jEFiaasSQmQ8lPWMR1Ks6JD1V0IvwbKHqc14fLjQk5U45QDXEuObU0UcQP1e.png) A pop-up window will appear. Before proceeding, review **Content Security Policy settings** and **Terms of Use**. The **Content Security Policy** **settings** section contains a separate code snippet for websites that use such a policy. If that's the case for your website, ask your website administrator to add the widget's domain to the policy. Otherwise, the widget may appear as an empty space. Use the **Copy code** button in this section to copy the snippet. When updating the policy, make sure to keep any domains that are already allowed. ![](https://staticfiles.gleap.io/ghelparticle/1N4qD84anUDZBCvT11kQB8ab5aPxKYTn3dTUDGtcu2mK52Wcsf0Z6khTPYVRo1yNNAPKKOUMscg.png) Next, expand the **Widget Terms of Use** section to review the terms and learn how the widget will work on your website. ”**Need help with the widget?”** section provides answers to frequently asked questions and redirects to [support@onde.app](mailto:support@ohde.app) for further inquiries.Once you're ready, press the main **Copy code** button to copy the generated embed code. You can add this code to your website yourself or share it with your website manager.  ![](https://staticfiles.gleap.io/ghelparticle/pacWC6tWoTHTBYSH9RFT0C8KMKknQQkXpzAfBpmNlQFTUXSUGVVkFY646mSQXeTSZbtVrfPz7Dp.png) Well done — now you can enjoy the modern view and efficiency of the custom widget that blends perfectly with your website! ![Kerb ride-booking homepage with pickup and drop-off fields, a See prices button, and a yellow taxi photo beside ride statistics. Visible: Kerb, Ride, Drive, Business, About, Help.](https://staticfiles.gleap.io/ghelparticle/zS4VP0RDKBjWzVPXZRaFBkDney1Z5n7ctWMS2SN33GzIsirgS1JXXbBAAwj2Ul4yckxc1W8H9qd.png) ## Additional notes - **Need multiple widgets?** You can create separate widgets for different websites or service types (for example, a regular service widget and an on-demand widget). Each widget has its own embed code. - **Updated your settings in the widget builder?** Remember to replace the existing embed code on your website with the new code to apply your changes.