Quinn React Wrapper

A React wrapper component for Quinn's video commerce widgets.

Installation

npm i @quinninc/react@latest

Usage Examples

Card Widget Example

import QuinnWrapper from "@quinninc/react";

function ProductPage() {
  return (
    <div>
      {/* Basic Card Widget */}
      <QuinnWrapper
        shopName="tvsmotor.com"
        target="quinn-cards-widget"
        widgetType="cards"
        shopType="general"
      />
    </div>
  );
}

Story Widget Example

import QuinnWrapper from "quinn-react-wrapper";

function StoryPage() {
  return (
    <div>
      {/* Story Widget with Playlist */}
      <QuinnWrapper
        shopName="tvsmotor.com"
        target="quinn-story-widget"
        widgetType="story"
        shopType="general"
        playlistId="your-playlist-id"
      />
    </div>
  );
}

Floating Widget Example

import QuinnWrapper from "quinn-react-wrapper";

function HomePage() {
  return (
    <div>
      {/* Floating Widget */}
      <QuinnWrapper
        shopName="tvsmotor.com"
        target="quinn-floating-widget"
        widgetType="floating"
        shopType="general"
        layer={2} // Adjust z-index layer as needed
      />
    </div>
  );
}

Props

| Prop | Type | Required | Default | Description | | ------------ | ------------------------------------------------------------------------------- | -------- | --------- | -------------------------------------------------------------- | | shopName | string | Yes | - | Your Quinn shop name (e.g., "tvsmotor.com") | | target | string | Yes | - | ID of the target DOM element where the widget will be rendered | | widgetType | "cards" | "story" | "floating" | Yes | - | Type of Quinn widget to display | | shopType | "bigcommerce" | "woocommerce" | "general" | "shopify" | "magento" | "fynd" | Yes | "general" | Your e-commerce platform type | | layer | number | No | 1 | Z-index layer for the widget | | playlistId | string | No | - | Optional playlist ID for specific content |

Important Notes

1. The target is just the ID of the div that Quinn will auto create, You don't need to create the div in your HTML. Simply pass any ID you want
2. Make sure your shopName is correctly configured with Quinn's services.
3. The widget will automatically load all required scripts based on your configuration.

Support

For additional support or questions about Quinn services, please contact Quinn support.

License

MIT