Skip to main content
Version: FINAL-1.0.0

Embedding the widget

Add a folder and create a NavBar component​

touch src/components/Widget.js

Paste the code below into the file​

import { useEffect, useState } from 'react';

const Widget = () => {
  // To simplify the demo, we'll pass an fake client emai
  const postProjectEventHandler = (ev) => {
    //Manage the event project posted
  }

  useEffect(() => {
    const widget = document.getElementById('widget')
    widget.addEventListener('bsSubmit', postProjectEventHandler)
    return () => {
      widget.removeEventListener('bsSubmit', postProjectEventHandler)
    }
  }, [])

  return (
    <section className="container" id="project">
      <be-widget
        id="widget"
        key-value={kEY_PROVIDED_BY_BUNNY}
        client-id={CLIENT_EMAIL_USING_THE_SITE}
      ></be-widget>
    </section>
  )
}

export default Widget

Import the widget into App.js​

bunny-widget-integration/src/App.js
import './App.css';
import NavBar from './components/layout/NavBar';
import Widget from './components/Widget';
import {BrowserRouter as Router, Route, Routes } from 'react-router-dom'

const App = () => {
  return (
    <>
      <Router>
        <NavBar />
        <Routes>
          <Route exact path="/" element={ <div className='container'><h1>Hello Bunnies!!!!</h1></div>} />
          <Route exact path="/widget/" element={ <Widget />} />
        </Routes>
      </Router>
    </>
  );
}

export default App;

You should get something like this:​

Type the url http://yoursite/widget