Bookingflix_calendar NPM

Dokumentation Bookingflix Calendar

Um den Bookingflix-Buchungskalender auf der eigenen Website zu integrieren, gibt es mehrere Varianten.

Vorbereitung

Data_String erzeugen

Benötigt wird immer ein DATA_STRING, den man via bookingflix.com/sign-in.html erhällt. Dieser setzt sich wie folgt zusammen:

DATA_STRING via Javascript-Code erzeugen:

Buffer.from(
  JSON.stringify({
    load: {
      user: USER_ID,
      ID: CALENDAR_ID,
      lang: "de",
    },
  }).toString("base64")
);

Alternative via Javascript-Code:

btoa(
  JSON.stringify({
    load: {
      user: USER_ID,
      ID: CALENDAR_ID,
      lang: "de",
    },
  })
);

DATA_STRING via PHP-Code erzeugen:

base64_encode(json_encode(array("load" => array("user" => USER_ID, "ID" => CALENDAR_ID, "lang" => "de"))))

1. Integration in HTML

<html>
  <head>
    <meta charset="utf-8" />
    <title>Flix-Calendar Integration</title>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://cal.bookingflix.com/vendor/save/de.js"></script>
    <script src="https://cal.bookingflix.com/src/flix-calendar.min.js"></script>
  </head>

  <body>
    <flix-calendar
      data="DATA_STRING"
      callback="calendarSettings"
    ></flix-calendar>
  </body>
</html>

2. Integration in Nuxt

Installation

npm i bookingflix_calendar --save

nuxt.config.js

head: {
  script: [
    {
      src: 'https://cal.bookingflix.com/vendor/save/de.js',
      mode: 'client'
    }
  ]
},
plugins: [
  { src: '~/plugins/calendar.js', ssr: false, client: true }
]

~/plugins/calendar.js

import Vue from "vue";
import calendar from "bookingflix_calendar";

Vue.use(calendar);

Component

<template>
  <div>
    <flix-calendar data="DATA_STRING" callback="calendarSettings" />
  </div>
</template>
<script>
  export default {...}
</script>

3. Integration in Wordpress

Installation via Wordpress-Plugin

4. Integration via Einbettungs-Code

<script>
  (function (a, b, c, d, e, f, g) {
    f = b.createElement(c);
    g = b.currentScript;
    f.async = 1;
    f.src = d;
    g.parentNode.replaceChild(f, g, b);
    f.onload = function () {
      new get_cal(30).build(f, e);
    };
  })(
    window,
    document,
    "script",
    "https://cal.bookingflix.com/vendor/embed.js",
    "DATA_STRING"
  );
</script>

axios bookingflix_additional core-js document-register-element vue vue-custom-element vuex

@infinitebrahmanuniverse/nolb-book @everything-registry/sub-chunk-1252 bookingflix_quickstart @zalastax/nolb-book

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago