Skip to content
Toprent.app Docs

Booking Widget

Overview

An embeddable booking widget that surfaces vehicles, prices, and availability on customer websites. Configuration is stored in Prisma widgets and exposed over GraphQL. The widget is built and published under widget/ and loaded via a script tag.

Schema

  • SDL: server/graphql/schema/widget.graphql
  • Types:
    • Widget, WidgetStyles, WidgetConnection
    • Enums: WidgetVariant, PaymentVariant, SortingType
  • Mutations:
    • createWidget(input: CreateWidgetInput!): WidgetPayload!
    • updateWidget(input: UpdateWidgetInput!): WidgetEdge!
    • deleteWidget(input: DeleteWidgetInput!): DeleteResponse!
  • Viewer field:
    • viewer.widgets: WidgetConnection!

Service layer

  • services/global/WidgetService.ts
    • findByWidgetId(widgetId) and findAllTenantWidgets(tenantId)
    • createWidget(data, widgetRef, tenantId) serializes styles JSON

Admin UI

  • Settings → Booking Widgets:
    • components/pages/Settings/BookingWidgets/Widget/*
    • Copy/paste embed code: Widget/CodeTab.js
    • General, Texts, Payments, Delivery tabs configure inputs and styles

Embedding

  • Script and container IDs: constants/index.js (widgetScriptId, widgetContainerId)
  • Code tab generates:
    • Script:
      • https://cloud.toprent.app/widget/${widgetContainerId}.js (with optional .gz)
    • Container:
      • <div id="${widgetContainerId}" data-widget-id="{widgetId}" style="z-index:1000;position:relative;"></div>
  • Example (copied from UI): see components/pages/Settings/BookingWidgets/Widget/CodeTab.js

Public endpoints

  • Translations/config (public):
    • pages/api/public/widget/translates.js
    • pages/api/public/widget/config.js
  • Vehicle list page (preview): see docs/development/project-description/12-widget-and-site-constructor.md

Build & package

  • Source: widget/
  • Dev server: widget/dev-server.js
  • Build configs: widget/webpack/*.config.js
  • Published asset path referenced in embed code above

Analytics & payments

  • Google Analytics ID: Widget.gtagId
  • Payments options via PaymentVariant (cardVerification, authorization, preAuthorization, instantPayment, noPayments)
  • Stripe integration toggle: stripeIntegrationEnabled