HELIUNION flight reservation demo

Demo & Docs

Installation

To use the component, the script and icon styles must be included on the page.

<!-- in the <head> section. do not use a cdn. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css"/>
<!-- Before the closing </body> element, updated continuously, self hosting possible after final release -->
<script src="https://flight-reservation.agon-e.com/agone-smart-forms.umd.js" defer async></script>

Usage

Example: this is how you insert the component with attributes. The web component appears as a single button and overlays the entire website when clicked. Until the final release, the component will remain hidden to allow the last adjustments for the respective host page. Visibility can be forced - if basic auth is not blocking it - using the ?beta=true parameter.

<ago-smart-forms
      class="flight-reservation"
      language="de"
      privacy-link="/de/f/data-protection"
      terms-link="/de/f/agb">
</ago-smart-forms>

Styling & Events

Direct styling of the web component is not possible. The component can be placed freely. The dialog can be controlled externally, allowing the host page to create its own links to control the component.

.flight-reservation {
  position:fixed;
  bottom:10px;
  left:10px;
  overflow:hidden;
}

<!-- externally open/close dialog (own buttons / links) -->
<script>
 window.dispatchEvent(new Event('ago-open-dialog'))
</script>

<script>
 window.dispatchEvent(new Event('ago-close-dialog'))
</script>

Compliance

The behavior of the web component respects the cookie settings of the respective host page. For this purpose, the host page must provide and define the following global function, which returns information about the current user choice. Cookie settings may be ignored during development. This function determines whether and to what extent the component can be used in production.

<script>
  function cmplz_has_consent(type) {
    // types: "functional", "map", "statistics", "preferences", "marketing"
    return type == "functional" ? true : false;
  }
</script>

External providers (List is subject to change)

flight-reservation.agon-e.com - no tracking - eu
miniatc.com - no tracking - eu
mapbox.com - usa

Development

During development, this page and all resources are protected by Basic Auth. This means that the script will be blocked by default on any host page until the final release.

FAQ

Difficulties with installation, feedback, questions.

Support