@honestdoor/widget-react-v2 v0.2.8
@honestdoor/widget-react-v2
API Key
You can obtain an API key by signing up at HonestDoor.com/for-business.
Usage
There are two ways to include the HonestDoor Price Widget on your team's website:
Usage with ReactJS
Install the npm package by running
npm install @honestdoor/widget-reactAnd including the exported component in your React layout, with the required prop apiKey:
const { Widget } = require('@honestdoor/widget-react-v2');
import '@honestdoor/widget-react-v2/dist/widget.es.css';
const MyPage = () => (
// other content
<Widget apiKey="<API_KEY>"/>
// other content
)Usage with HTML Script Import
For non-React projects, you can install the necessary code by including a script tag with the unpkged source from npm. The package also exports the class HDWidget that can be instantiated with two parameters, your API keyand the id of the DOM element where you want the widget to appear:
<html>
<body>
<div id="hd-widget"></div>
<link rel="stylesheet" href="https://unpkg.com/@honestdoor/widget-react-v2@latest/dist/widget.umd.css">
<script src="https://unpkg.com/@honestdoor/widget-react-v2@latest/dist/widget.umd.js"></script>
<script>
new HDWidget("<API_KEY>", "hd-widget");
</script>
</body>
</html>Layout Notes
The widget is fixed at 425x388px, with no set margin. Please accommodate some white space around the widget, and refrain from any other in-line elements on the page, in order to fit mobile screens. The search bar has a popover element for the search results that is appended to the document.body. Be aware that the results will extend past the fixed dimensions of the widget, roughly covering another 200px below.
