![flightkit-200](https://js.flybits.app/images/Flybits-Header-flightkit-thin.png)
# Flightkit

v2.1.1

Flybits Flightkit is a fully contained, framework agnostic solution for personalized UI and Content within your web applications.  Composed of [native web components](https://www.webcomponents.org/introduction) you can simply drop pure HTML tags into your application and view curated experiences from the [Flybits](https://flybits.com) platform.

## Quickstart

Here is the bare minimum code required to quickly embed a Flybits powered UI container within your existing application.  For more flexible and robust options, read more in the following sections starting with Installation.

1. **Import**

via NPM:

```shell
$ npm install flybits flightkit --save
```

```javascript
import Flybits from 'flybits/dist/flybits.mjs';
import { FlybitsSlot } from 'flightkit';
```

or via a CDN

```javascript
<!-- Import the Flybits.js core SDK -->
<script src="https://cdn.jsdelivr.net/npm/flybits@2.18.0/dist/flybits.min.js"></script>
<!-- Import the Flightkit library -->
<script type="module" src="https://cdn.jsdelivr.net/npm/flightkit@2.1.1/dist/flightkit.js"></script>
```

2. **Declare**

```javascript
<flybits-slot ref-id="offers"></flybits-slot>
```

3. **Authenticate**

```javascript
<script>
  // Use existing Flybits.js authentication strategies
  Flybits.init({
    HOST: 'https://api.demo.flybits.com'
  }).then(function(){
    return Flybits.Session.connect(new Flybits.idp.AnonymousIDP({
      projectID: '42FA7D27-9D44-42ED-A112-EAED2385B36C'
    }))
  })
</script>
```

4. **Enjoy Contextual Personalized Content**

![Carousel of curated content](https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1furhUrHM7k3yZOnffSu%2Fuploads%2FFmJd3OrB6TWt97pumBDt%2FScreenshot%202024-02-12%20024159.png?alt=media&token=4e0ede9e-0c3c-42ac-a322-4323b37c3bb0)

> Note: Layouts & content must be configured within the Flybits Experience Studio for them to appear within a FlybitsSlot.