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

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 loader parameter types

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

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

When using styles BUBBLE and TEXTED. These are the options:

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

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

When using styles INLINE_EMBED and DIRECT_FORM_EMBED. These are the options:

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

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

// 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 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>

<!-- 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>

// 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);
            });
    }
}

Latest version 1.1.0 (2024-04-03):

Detailed changes for each release are documented in the Docs.

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.

The MIT License