Our React package is available from npm. Simply install using a package manager of your choice.
Installation with npm:
npm install @getgrover/react-partner-widget --save
Installation with yarn:
yarn add @getgrover/react-partner-widget
Import the component at the desired location:
import GroverWidget from "@getgrover/react-partner-widget"
GroverWidget
imports the original default design. Future releases will add more designs that can be selectively imported.
In order to display the Grover button and apply agreed-upon recirculation rules, we'll need some data. Here's a list of all the props the component accepts:
articleId
Required String: Pass your article ID so that we can match with the right product variant.
accessToken
Required String: Authenticates and identifies your request.
stockAbsolute
Required Number: See Passing stock levels
stockEnumerated
Required String Enumeration: See Passing stock levels.
locale
String: Language. Supports de
and en
. Defaults to de
.
eans
Array of Strings: Provide EANs associated with this product variant for improved matching.
className
String: See Customizing the design
classNames
Object: See Customizing the design
moreInformationUrl
String: Link to open when user clicks "More Information". Links to Grover checkout page by default.
deliveryDate
Date String: See Passing Delivery estimates.
deliveryTime
Number: See Passing Delivery estimates
serverUrl
String: Override URL for Grover API. Defaults to api.getgrover.com
. See Testing and QA Environments
onButtonClick
Function: Called on rental button click with React SyntheticEvent parameter. Can be used for analytics.
showOnlyDiscountedPrice
Boolean: If true - only the discounted price will be displayed.
Stock levels are required to decide if the button should be displayed, as well as for applying recirculation rules. You have the choice to pass stock levels either as an absolute value using the stockAbsolute
property, or pass an enumeration using the stockEnumerated
property. You need to provide either-or, otherwise, the widget won't display.
If you want to use enumerated values, import our stock enumeration value constants along with the component:
import GroverWidget, { STOCK_LEVEL_ENUM } from "@getgrover/react-partner-widget"
Available enumerations are:
const STOCK_LEVEL_ENUM = {
low: 'low',
medium: 'medium',
high: 'high',
none: 'none',
};
When initializing the component, map the values available to you onto these constants, then pass to the stockEnumerated
property.
For example, let's say your API returns a stock level enumeration with the following possible values: out-of-stock
, few
, some
or lot
. You could set your mapping up like this:
function mapStockValue(stockValue) {
switch (stockValue) {
case 'out-of-stock':
return STOCK_LEVEL_ENUM.none;
case 'lot':
return STOCK_LEVEL_ENUM.high;
case 'some':
return STOCK_LEVEL_ENUM.medium;
case 'few':
return STOCK_LEVEL_ENUM.low;
default:
return null;
}
}
Then, pass the translated enumeration to the component:
stockEnumerated={{ mapStockValue(yourEnumeratedStockLevel) }}
Delivery time estimates are required in order to fulfill some recirculation agreements. If you're unsure if you should pass this data, please ask your account manager. You have the choice to either pass an absolute delivery estimation date in the format YYYY.MM.DD
to the deliveryDate
property, or pass a relative amount of days from now to deliveryTime
. For example, if your system estimates a delivery time of 3 days, pass 3
.
You can customize any element of the button flexibly. To do so, we allow you to add your own custom classes to any of the button's elements. That way, you can structure your CSS however you want, and just tell our component what classes to add.
Use the classNames
property to specify what class names should be applied to what elements. Here's a list of the component's elements:
classNames: PropTypes.shape({
headerSection: PropTypes.string,
headerText: PropTypes.string,
moreInfoLink: PropTypes.string,
priceContainer: PropTypes.string,
price: PropTypes.string,
discountPriceContainer: PropTypes.string,
discountPrice: PropTypes.string,
originalPrice: PropTypes.string,
button: PropTypes.string,
buttonIcon: PropTypes.string,
buttonText: PropTypes.string,
}),
Let's say you want to change the background of the button to yellow, and the price to blue. Simply write your CSS classes anywhere like this:
.custom-btn { /* class name can be anything you want */
background-color: yellow;
}
.custom-price { /* class name can be anything you want */
background-color: blue;
}
Then, let the component know what classes to apply to the button and price elements by specifying them in the classNames
property:
classNames={{ button: "custom-btn",
price: "custom-price" }}
Your custom classes should now be applied.
If you want to override the component's main container, you'll need to pass the className
property. That means that if you want to add a style to the whole widget as well as target specific elements, you'll need to pass both className
(applied to the container) and classNames
(applies specific classes to specific elements).
className="custom-container-styles"
Let's say you want to put a maximum size of 400px on the whole component. Simply define your CSS class anywhere like this:
.custom-container { /* class name can be anything you want */
max-width: 400px;
}
Then, assign the className
property:
className="custom-container"
Your custom styles are now applied to the whole component.
We can provide you with special tokens for your QA and Staging environments. To set up a new environment, please contact us. We'll synchronize some Article IDs and set up some example products so that you can get testing.
In your testing environments, pass your special staging accessToken
, and override the component's serverUrl
to our staging API, hosted at https://apist.getgrover.com/api/v1
.
Development guide is here.