`@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-react

And 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.