corgi-widget
TypeScript icon, indicating that this package has built-in type declarations

1.1.0 • Public • Published

Corgi Widget

Corgi Widget is a JavaScript library for embedding a customizable widget on your website. This README provides instructions for clients on how to integrate the Corgi Widget using a CDN or as an npm package.

Check out the Corgi Partner Documentation for up-to-date documentation and examples.

Table of Contents

Using CDN

To use the Corgi Widget via CDN, include the following script tag in your HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Website</title>
    
    <!--- Add Script Tag -->
    <script src="https://cdn.jsdelivr.net/npm/corgi-widget"></script>
</head>
<body>
    <!--- Add Corgi Widget -->
    <div id="corgi-widget" corgi-partner="partner-example" corgi-style="popup"></div>
</body>
</html>

Using npm Package

To use the Corgi Widget as an npm package in your application, follow these steps:

Installation

Install the Corgi Widget package via npm:

npm install corgi-widget

General Example for Projects

The Corgi Widget can be used in various frontend frameworks and libraries. The general approach involves importing the widget and initializing it in the appropriate lifecycle hook of the framework you are using.

Example Using Plain JavaScript:

  1. Install the Package:

    npm install corgi-widget
    
  2. Create a JavaScript File:

    import CorgiWidget from 'corgi-widget';
    
    document.addEventListener('DOMContentLoaded', () => {
        CorgiWidget.initializeWidget();
    });
  3. Include widget in your HTML:

    <div id="corgi-widget" corgi-partner="1" corgi-style="popup"></div>

Example Using React

  1. Create a React Component:

    Create a React component that initializes the widget. For example, create a file named CorgiWidgetComponent.jsx:

    import React, { useEffect } from 'react';
    import { initializeWidget } from 'corgi-widget';
    
    const CorgiWidgetComponent = () => {
        useEffect(() => {
            initializeWidget();
        }, []);
    
        return (
            <div id="corgi-widget" corgi-partner="1" corgi-style="popup"></div>
        );
    };
    
    export default CorgiWidgetComponent;
  2. Include the Component in Your Application:

    Use the CorgiWidgetComponent in your main application component. For example, update App.jsx:

    import React from 'react';
    import CorgiWidgetComponent from './CorgiWidgetComponent';
    
    const App = () => {
        return (
            <div>
                <h1>Corgi Widget Test</h1>
                <CorgiWidgetComponent />
            </div>
        );
    };
    
    export default App;

Readme

Keywords

none

Package Sidebar

Install

npm i corgi-widget

Weekly Downloads

3

Version

1.1.0

License

none

Unpacked Size

8.65 kB

Total Files

7

Last publish

Collaborators

  • corgiinsure