DOM Package Overview
What the Tiquo DOM Package provides
Tiquo Example DOM Package Project
Explore a live example of the DOM Package in a customer-facing application.
tiquo-co/dom-package-example
Review the source code for the Tiquo DOM Package example project.
The Tiquo DOM Package (@tiquo/dom-package) is a headless JavaScript SDK for browser-based Tiquo integrations. It provides customer authentication, first-party website analytics, customer data helpers, custom service catalogs, customer-flow and membership embeds, locked service-booking embeds, session management, and WebView token handoff.
Headless means that the SDK supplies authentication, data, and integration methods rather than finished page components. Your application owns forms, cards, navigation, loading states, errors, and profile pages. Tiquo supplies its own transactional interface only inside hosted customer-flow, service-booking, and membership iframes.
Use the DOM Package when you control the JavaScript build for your website or app and want a typed SDK that works directly with the Customer API.
New integrations should import Tiquo as the main SDK class. Specialist exports such as TiquoAnalytics and TiquoPhone are available for analytics-only setups and phone number utilities, while TiquoAuth remains as a backwards-compatible alias for older authentication integrations.
What It Provides
| Area | Description |
|---|---|
| Setup | Install the package, get a public key, and initialize the SDK |
| Customer Authentication | Sign customers in with an email OTP flow |
| Website Analytics | Track first-party pageviews, custom events, and known-customer activity |
| Customer Data | Fetch and update customer profile, orders, bookings, enquiries, receipts, and companies |
| Service Catalogs and Locked Booking | Load a customer flow's services, build custom catalog and detail pages, and embed booking for one selected service |
| Embeds and Memberships | Embed customer flows and public membership signup, pass signed-in sessions securely, and understand membership listing behavior |
| Session Management | Handle auth state changes, logout, token refresh, multi-tab sync, and cleanup |
| Framework Integration | Connect the headless SDK to React or another reactive UI framework |
| Utilities and Errors | Normalize international phone numbers and handle typed SDK errors |
| WebView Integration | Pass native app tokens into a WebView-hosted page |
| Dashboard Configuration | Configure public keys, website domains, OTP sender details, and session behavior |
DOM Package, Hosted Package, and hosted iframes
These are related integration layers, but they are not interchangeable:
| Layer | How it is added | What it provides |
|---|---|---|
| DOM Package | Install @tiquo/dom-package from npm and call typed JavaScript methods | Headless authentication, data, analytics, token, catalog, and embed helpers for applications with a build step |
| Hosted Package | Add the Tiquo hosted script and data-tiquo-* HTML attributes | Declarative authentication and customer-data behavior for Webflow and other site builders |
| Hosted customer flow | Add a Tiquo iframe directly or create it with a DOM or Hosted Package embed helper | Tiquo's transactional UI for booking or membership signup |
Seeing a Tiquo iframe on a page does not mean the page uses the Hosted Package. Both packages can create and authenticate the same hosted flows, but the npm SDK and hosted script are separate delivery methods with different public APIs.
Method index
| Area | Main DOM Package methods |
|---|---|
| Authentication | sendOTP(), verifyOTP(), getUser(), isAuthenticated(), logout() |
| Customer data | updateProfile(), uploadProfilePhoto(), getOrders(), getBookings(), getUpcomingBookings(), getReceipt(), downloadBookingTicket(), getEnquiries(), createEnquiry(), getCompanies(), getCompanyColleagues() |
| Service catalogs | getFlowServices(), getFlowService() |
| Embeds | embedCustomerFlow(), embedServiceBooking(), embedMembership(), getIframeToken() |
| Sessions and external tokens | onAuthStateChange(), getAccessToken(), getRefreshToken(), initWithTokens(), destroy() |
| Analytics | tiquo.analytics, TiquoAnalytics |
| Utilities | TiquoPhone, TiquoAuthError |
The npm DOM Package does not currently provide a typed getMemberships() helper. Use a known public plan ID with embedMembership(), call the authenticated Customer API memberships endpoint, or use the Hosted Package membership collections.