zachari-dunes-booking-widget

An embeddable widget by Smarter Labs for WeCreate that takes user information for booking a hotel and directs the user to the Hilton website to complete the transaction.

Usage no npm install needed!

<script type="module">
  import zachariDunesBookingWidget from 'https://cdn.skypack.dev/zachari-dunes-booking-widget';
</script>

README

Zachari Dunes Booking Widget

An embeddable widget by Smarter Labs for WeCreate that takes user information for booking a hotel and directs the user to the Hilton website to complete the transaction.

Technology

  • Svelte: Frontend framework
  • Vite: Frontend development tooling
  • npm: Deploy to here to automatically deploy to JSDelivr's CDN
  • JSDelivr: A public CDN used to host the CSS and JS files
  • Yarn: Package manager
  • np: For versioning and deploying to npm/JSDelivr

Installation

Run yarn one time from the root to install dependencies.

Development

Run yarn dev whenever you want to start up a live development server. Edit CSS directly in the Svelte files to apply scoped CSS. Or just add global styles to whatever page the widget is embedded on.

To deploy your changes, run np to version and deploy to npm. JSDelivr links will automatically update at some point. Since it's cached, it may take a bit.

Implementation

<head>
  <!-- Optional: Include the stylesheet in the head -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/zachari-dunes-booking-widget@1.0.3/dist/assets/index.css" />
</head>
<body>
  <!-- Paste the app container wherever you want the widget to appear -->
  <div id="bookingWidget"></div>

  <!-- Include the JavaScript in the body -->
  <script src="https://cdn.jsdelivr.net/npm/zachari-dunes-booking-widget@1.0.3/dist/assets/index.js"></script>
</body>