`@honestdoor/widget-react`

WIP

API Key

You can obtain an API key by signing up at HonestDoor.com/for-business. (TODO)

There are two ways to include the HonestDoor Price Widget on your team's website:

Usage: 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');

const MyPage = () => (
  // other content

  <Widget apiKey="<API_KEY>"/>

  // other content
)

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:

Usage: HTML Script Import

  <html>
    <body>
      <div id="hd-widget"></div>
      
      <script src="https://unpkg.com/@honestdoor/widget-react/dist/widget.umd.js"></script>
      <script>
        new HDWidget("<API_KEY>", "hd-widget");
      </script>
    </body>
  </html>

Layout Notes

The widget is fixed at 400x125px, 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.