Public repo of the original developers internal version
Go to file
2019-08-24 09:49:30 -04:00
.circleci fix circleci missing job (#111) 2019-06-14 22:41:30 -04:00
.storybook Storybook (#122) 2019-06-20 20:43:09 -04:00
jest Optional Mount Parameters (#123) 2019-06-20 13:26:02 -04:00
public Optional Mount Parameters (#123) 2019-06-20 13:26:02 -04:00
src Optional Mount Parameters (#123) 2019-06-20 13:26:02 -04:00
stories Storybook (#122) 2019-06-20 20:43:09 -04:00
vendor adding cleanslate support for style scoping 2018-06-09 08:43:18 -04:00
.eslintrc Optional Mount Parameters (#123) 2019-06-20 13:26:02 -04:00
.gitignore Storybook (#122) 2019-06-20 20:43:09 -04:00
bookmarklet-flow.gif doc: fix typo (#84) 2019-04-27 09:01:23 -04:00
package-lock.json Update dependency eslint-loader to v3 (#162) 2019-08-24 09:49:30 -04:00
package.json Update dependency eslint-loader to v3 (#162) 2019-08-24 09:49:30 -04:00
README.md doc: adjust demo size (#85) 2019-04-27 09:04:32 -04:00
renovate.json enabling auto merge (#163) 2019-08-24 09:41:01 -04:00
webpack.config.js Optional Mount Parameters (#123) 2019-06-20 13:26:02 -04:00

Embeddable React Widget

Easy creation of embeddable widgets - https://seriousben.github.io/embeddable-react-widget

CircleCI codecov Renovate enabled

Features

  • Full ES6/ES2015 support (with Babel)
  • Package fonts, css, json, javascripts together into one single package (with Webpack)
  • No css styling conflicts between the host page and the widget (with https://github.com/premasagar/cleanslate)
  • Bookmarklet supported for fast testing and demonstration
  • User theming of widget
  • Obfuscating of the widget code
  • Unit Tested with code coverage enabled
  • Continuous Integration ready

Demo

Running the widget

Install dependencies

$ npm install

Start the development server

$ npm start
... server running at http://localhost:8080/

Run tests

$ npm test
... test output

Production build

$ npm run build
... create files in /dist

Roadmap

  • Widget as react app - index.html works (webpack, babel, react)
  • React widget (widget builder)
  • Webpack changed to output a library
  • Add tests
  • Add circleci integration
  • Add codecov integration for codecoverage
  • Production Build
  • Minified
  • Add greenkeeper
  • Bookmarklet
  • Reset / Cleanslate / No-conflicts of styles
  • Obfuscation
  • Theming support
  • Storyboard and docs
  • Integrate eslint with webpack

Background

What is an embeddable widget?

  • Usable using a simple <script> tag
  • Configurable with code
  • Themable

Why not in an iframe?

  • Interaction between the frame and the hosting page is tricky and not recommended
  • You can only display content within the iframe
  • iframe and content resizing is impossible
  • iframe sandboxing can result in missing functionalities

Read more

Read more about about widgets, react and scoping of css.