Add hubspot example and readme

Author: jucallej

README.md

@@ -132,7 +132,7 @@ You can pass the following props to the `LiveChatLoaderProvider` provider:
 
 ## 💬 Supported Providers
 
-Currently there are six supported providers:
+Currently there are seven supported providers:
 
 <details>
 <summary id="help-scout">Help Scout</summary>
@@ -347,6 +347,39 @@ You can customise the Chatwoot placeholder by passing the following props to the
 
 </details>
 
+<details>
+<summary id="hubspot">Hubspot</summary>
+
+To use Hubspot import the `LiveChatLoaderProvider` and set the `provider` prop
+as `hubSpot` and the `providerKey` prop as your Hubspot API Key.
+
+Then import the `Hubspot` component.
+
+```jsx
+import { LiveChatLoaderProvider, Hubspot } from 'react-live-chat-loader'
+
+export default class App extends React.Component {
+  render() {
+    return (
+      <LiveChatLoaderProvider providerKey="asdjkasl123123" provider="hubspot">
+        /* ... */
+        <Hubspot />
+      </LiveChatLoaderProvider>
+    )
+  }
+}
+```
+
+You can customise the Hubspot placeholder by passing the following props to the
+`Hubspot` component:
+
+- `backgroundColor`: The background color of the placeholder
+- `loader`: A react component shown while the Hubspot libraries are loading
+
+</details>
+
+<details>
+
 ## ➕ Adding a Provider
 
 To add a new live chat provider, follow the steps in [Contributing: Adding a Provider](CONTRIBUTING.md#-adding-a-provider).

website/components/exampleLinks.js

@@ -33,6 +33,11 @@ const ExampleLinks = () => (
         <a>Chatwoot</a>
       </Link>
     </li>
+    <li>
+      <Link href="/hubspot">
+        <a>HubSpot</a>
+      </Link>
+    </li>
   </ul>
 )
 

website/pages/hubspot.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { LiveChatLoaderProvider, HubSpot } from 'react-live-chat-loader'
+import type { NextPage } from 'next'
+
+import Layout from '../layouts/main'
+import ExampleLinks from '../components/exampleLinks'
+
+const Page: NextPage = () => (
+  <LiveChatLoaderProvider
+    provider="hubSpot"
+    providerKey=""
+  >
+    <Layout title="React Live Chat Loader: Hubspot">
+      <div className="wrapper">
+        <div className="inner">
+          <h1>React Live Chat Loader: Hubspot</h1>
+          <p>
+            This is an example implementation of the Hubspot widget using{' '}
+            <a href="https://github.com/calibreapp/react-live-chat-loader">
+              react-live-chat-loader
+            </a>
+            .
+          </p>
+          <p>View other demos:</p>
+          <ExampleLinks />
+        </div>
+      </div>
+      <HubSpot backgroundColor='#017848'/>
+    </Layout>
+  </LiveChatLoaderProvider>
+)
+
+export default Page