# feednotch-widget

A library to help developers integrate feednotch.com's widget in applications powered by javascript frameworks (React, Vue.js, Next.js, Angular, and Svelte)

### 💻 Developer Guide [Docs](https://feednotch.com/developers)

## 🔧 Install

feednotch-widget is available on npm. It can be installed with the following command:

```
npm install feednotch-widget --save
```

feednotch-widget is available on yarn as well. It can be installed with the following command:

```
yarn add feednotch-widget
```

NOTE: Please use the Latest version 1.1.0 (2024-04-03)

## 🔰 Widget Params

<table>
  <tr>
    <th>Param</th>
    <th>Default</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>apiKey</td>
    <td><code>xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx</code></td>
    <td>A placeholder of the feednotch application apiKey.</td>
  </tr>
  <tr>
    <td>style</td>
    <td><code>BUBBLE</code></td>
    <td>Widget display style. This helps you choose the way you want to display the widget. Can also be <code>TEXTED | INLINE_EMBED | DIRECT_FORM_EMBED</code></td>
  </tr>
  <tr>
    <td>position</td>
    <td><code>LEFT</code></td>
    <td>If <code>BUBBLE or TEXTED</code> styled widget. Then you have to specify the position with can also be <code>RIGHT</code></td>
  </tr>
  <tr>
    <td>triggerOrContainerId</td>
    <td><code>undefined</code></td>
    <td>When using <code>INLINE_EMBED | DIRECT_FORM_EMBED</code> then you have to specify a unique id for the trigger to open the widget popup or containerId where to place the widget form</td>
  </tr>
</table>

## 🔧 Param Types

Widget loader parameter types

```typescript
interface WidgetLoaderOptions {
    apiKey: string;
    style: 'BUBBLE' | 'TEXTED' | 'INLINE_EMBED' | 'DIRECT_FORM_EMBED';
    position?: 'LEFT' | 'RIGHT';
    triggerOrContainerId?: string;
}
```

## ❗ Important to Know

You are not allowed to use all the optional options <code>(position & triggerOrContainerId)</code> in one widget loader
<code>apiKey (data-apiKey)</code> and <code>style (data-style)</code> are required.

When using styles <code>BUBBLE</code> and <code>TEXTED</code>. These are the options:

```js
// Don't include the triggerOrContainerId (data-triggerOrContainerId)

loadWidget({
    apiKey: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
    style: 'BUBBLE',
    position: 'LEFT',
})
```

When using styles <code>INLINE_EMBED</code> and <code>DIRECT_FORM_EMBED</code>. These are the options:


```js
// Don't include the position (data-position)

loadWidget({
    apiKey: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
    style: 'INLINE_EMBED',
    triggerOrContainerId: 'unique-identification-string',
})
```

## 💡 Usage

```jsx
// React Sample

import React, { useEffect } from 'react';
import loadWidget from 'feednotch-widget';

const YourComponent = () => {
    useEffect(() => {
        loadWidget({
            apiKey: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
            style: 'BUBBLE',
            position: 'LEFT',
        })
            .then(() => {
                console.log('Widget script loaded successfully');
            })
            .catch((error) => {
                console.error('Error loading widget script:', error);
            });
    }, []);

    return (
        <div>
            {/* Render your component UI here */}
        </div>
    );
};

export default YourComponent;
```
```vue
<!--Vue Sample-->

<template>
    <!-- Your Vue component's template -->
</template>

<script>
import loadWidget from 'feednotch-widget';

export default {
    mounted() {
        loadWidget({
            apiKey: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
            style: 'BUBBLE',
            position: 'LEFT',
        })
            .then(() => {
                console.log('Widget script loaded successfully');
            })
            .catch((error) => {
                console.error('Error loading widget script:', error);
            });
    }
};
</script>
```
```html
<!-- Svelte Sample -->

<script>
    import loadWidget from 'feednotch-widget';

    loadWidget({
        apiKey: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
        style: 'BUBBLE',
        position: 'LEFT',
    })
        .then(() => {
            console.log('Widget script loaded successfully');
        })
        .catch((error) => {
            console.error('Error loading widget script:', error);
        });
</script>
```
```typescript
// Angular Sample

import { Component, OnInit } from '@angular/core';
import loadWidget from 'feednotch-widget';

@Component({
    selector: 'app-widget',
    templateUrl: './widget.component.html',
    styleUrls: ['./widget.component.css']
})
export class WidgetComponent implements OnInit {

    constructor() { }

    ngOnInit(): void {
        loadWidget({
            apiKey: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
            style: 'BUBBLE',
            position: 'LEFT',
        })
            .then(() => {
                console.log('Widget script loaded successfully');
            })
            .catch((error) => {
                console.error('Error loading widget script:', error);
            });
    }
}
```

## 📜 Changelog

Latest version 1.1.0 (2024-04-03):

Detailed changes for each release are documented in the [Docs](https://feednotch.com/developers).


## ❗ Issues

If you think anything about the `feednotch-widget` package can be improved, please do head to the docs page and file a new issue or suggestion on the feednotch widget available on the page.

## ⚖️ License

The MIT License [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)