embeddable-widget-test

v1.0.4

Published

6 months ago

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.

Downloads

0High
0Medium
0Low

angelherrarte

Corgi Widget

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

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:

Install the Package:
```
npm install corgi-widget
```

Create a JavaScript File:

import CorgiWidget from 'corgi-widget';

document.addEventListener('DOMContentLoaded', () => {
    CorgiWidget.initializeWidget();
});

Include widget in your HTML:

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

Example Using React

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;

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;

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme