This module is distributed via npm and should be installed as one of your project's dependencies:
npm install @citizenshipper/widgets
Or include the script directly into your html
<script src="https://unpkg.com/@citizenshipper/widgets@0.1.3/widgets.umd.js"></script>
Widget can be used in two ways:
- As a module import like:
import { renderDogPriceEstimateWidget } from "@citizenshipper/widgets"
const dog = {
name: "Remy",
breed: "Australian Shepherd",
};
const pickupAddress = {
city: "Dallas",
stateCode: "TX",
lat: 32.779167,
lng: -96.808891,
zipCode: "75001" // can be optional,
};
const root = document.getElementById("cs-widget")
const apiKey = "YOUR_API_KEY"
function main() {
renderDogPriceEstimateWidget({
root,
dog,
pickupAddress,
apiKey
})
}
Inside your html template you need to create
divelement with anidofcs-widget
| Prop | Type | Required | Description |
|---|---|---|---|
| root | HTMLEelement | true | html element reference where widget will be instantiated |
| dog | object | true | dog related data like name and breed |
| pickupAddress | object | true | address related data like city, state code, lat, lng and zip code. Zip code is optional |
| apiKey | string | true | google api key |
Type: HTMLElement, required: true
Type: object, required: true
const dog = {
name: "Remy",
breed: "Australian Shepherd",
}
Type: object, required: true
const pickupAddress = {
city: "Dallas",
stateCode: "TX",
lat: 32.779167,
lng: -96.808891,
zipCode: "75001",
}
Type: string, required: true
const apiKey = "AIzaSyC1qY_rest_of_the_key"
- As a standalone package
Element of type
divwith anidofcs-widgetmust be present
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Your project name</title>
</head>
<body>
<div id="cs-widget" data-dog-name="Remy" data-dog-breed="Australian Shephered" data-pickup-state-code="TX" data-pickup-city="Dallas" data-pickup-lat="32.779167" data-pickup-lng="-96.808891" data-pickup-zip="75001" data-api-key="AIzaSyC1qY_rest_of_the_key"></div>
<script src="https://unpkg.com/@citizenshipper/widgets@0.1.38/widgets.umd.js" type="text/javascript"></script>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
const initCSWidget = window.citizenshipperWidget.renderDogPriceEstimateWidget;
initCSWidget()
});
</script>
</body>
</html>