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.
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>To use the Corgi Widget as an npm package in your application, follow these steps:
Install the Corgi Widget package via npm:
npm install corgi-widgetThe 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>
-
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;