# vop-embed

Latest version **0.1.2** (published 2020-08-10) · 0 weekly downloads

## Install

```sh
npm install vop-embed
pnpm add vop-embed
yarn add vop-embed
bun add vop-embed
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2020-08-10 |
| First published | 2020-08-10 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 21 |
| Unpacked size | 2.2 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | vopmike |

## Links

- npm: https://www.npmjs.com/package/vop-embed
- Issues: https://getvop.atlassian.net/jira/software/projects/VOPEMBED/boards/2
- npm.io page: https://npm.io/package/vop-embed

## Dependencies (21)

- [react](https://npm.io/package/react.md) ^16.13.1
- [swiper](https://npm.io/package/swiper.md) ^6.0.4
- [core-js](https://npm.io/package/core-js.md) ^2.6.11
- [use-http](https://npm.io/package/use-http.md) ^1.0.13
- [react-dom](https://npm.io/package/react-dom.md) ^16.13.1
- [twin.macro](https://npm.io/package/twin.macro.md) ^1.4.1
- [react-modal](https://npm.io/package/react-modal.md) ^3.11.2
- [react-player](https://npm.io/package/react-player.md) ^2.5.0
- [@emotion/core](https://npm.io/package/@emotion/core.md) ^10.0.28
- [camelcase-keys](https://npm.io/package/camelcase-keys.md) ^6.2.2
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^10.0.27
- [@tailwindcss/ui](https://npm.io/package/@tailwindcss/ui.md) ^0.4.0
- [emotion-theming](https://npm.io/package/emotion-theming.md) ^10.0.27
- [use-scroll-lock](https://npm.io/package/use-scroll-lock.md) ^1.0.0
- [body-scroll-lock](https://npm.io/package/body-scroll-lock.md) ^3.0.3
- [react-responsive](https://npm.io/package/react-responsive.md) ^8.1.0
- [babel-plugin-macros](https://npm.io/package/babel-plugin-macros.md) ^2.8.0
- [react-number-format](https://npm.io/package/react-number-format.md) ^4.4.1
- [@react-hook/throttle](https://npm.io/package/@react-hook/throttle.md) ^2.2.0
- [react-lazy-load-image-component](https://npm.io/package/react-lazy-load-image-component.md) ^1.5.0
- [@emotion/babel-plugin-jsx-pragmatic](https://npm.io/package/@emotion/babel-plugin-jsx-pragmatic.md) ^0.1.5

## Recent versions

- 0.1.2 (latest) — 2020-08-10

## README

<div align="center">

  [![Vop](./public/img/repo-banner.png)](https://getvop.com)

  ### Shoppable experiences from your social media posts

</div>

![Release](https://github.com/dreambiglabs/vop-embed/workflows/Release/badge.svg?branch=master)

## What is Vop Embed?

This is the customer embed widget codebase of [Vop](https://getvop.com). Every single type of widget that is embedded onto a customers website is in this repository.

### Inspiration

Most of the embed inspiration comes from a project by [Jenya Y.](https://blog.jenyay.com) called [help-widget](https://github.com/jenyayel/help-widget). The biggest difference was ditching `preact` and refactoring to use `react`. While `preact` is mostly cross compatible with `react` this change was to minimise any friction for newcomers.

Using this structure is primarily for the following advantages:

* Injection through a target element
* Small footprint and solid snippet on hosting website (see [usage](#usage))
* Multi-instance on the same page
* Isolation of code execution and CSS
* Customisation via configuration injection and API to Widget

### Vision

It is obvious with the growth of e-commerce, many stores are trying to drive traffic from their social media content and vice versa... (incomplete)

#### Roadmap & Issues

We use Jira for the [issue tracking](https://getvop.atlassian.net/jira/software/projects/VOPEMBED/boards/2) and [product road map](https://getvop.atlassian.net/jira/software/projects/VOPEMBED/boards/2/roadmap).

### Status

Vop Embed has been in full-time development since June 2020.

<div align="center">
  <img height="31px" src="public/img/divider.png" />
</div>

### Codebase

#### Technologies

Almost all the code in this repository will be JavaScript. The embed widgets mostly communicate with our Vop API which is written in Go.

Notable technologies we use:
- webpack
- react
- typescript
- jest

#### Folder structure

```sh
vop-embed/
├── dev      # Demo of the different embed component types
├── dist
├── docs
├── public   # Public files used on the frontend
├── src      # Embed react components and api services
└── test     # Tests (using Jest)
```

#### Code Style

We run Prettier on-commit, which means it will be automatically formatted according to the common style when you run `git commit`. We also have ESLint setup, although we've disabled all stylistic rules since Prettier takes care of those.

##### Rules
- All `.js` files must be typed using TypeScript so use `.ts` and `.tsx`.

- Please don't commit any `console.logs` in any file. We use the debug module across the codebase to log debugging information in development only. The only exceptions are errors, which you can log, but you have to use `console.error` to be explicit about it.

<div align="center">
  <img height="31px" src="public/img/divider.png" />
</div>

### First time setup

The first step to running Vop Embed locally is downloading the code by cloning the repository:

```sh
git clone git@github.com:dreambiglabs/vop-embed.git
```
 If you get `Permission denied` error using `ssh` refer [here](https://help.github.com/articles/error-permission-denied-publickey/)
or use `https` link as a fallback.
```sh
git clone https://github.com/dreambiglabs/vop-embed.git
```

## Usage

In order to embed the widget add the following snippet at any location on the hosting page:

```html
<div id="vop-root"></div>
<script>
  (function (w, d, s, o, f, js, fjs) {
    w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
    js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
    js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
  }(window, document, 'script', 'vop', './widget.js'));
  vop('init', { element: document.getElementById('vop-root'), appId: 123, component: 'carousel' });
</script>
```

During initialization you can pass additional configurations to widget like so:

```diff
-vop('init');
+vop('init', { element: document.getElementById('vop-root'), appId: 123, component: 'carousel' });
```

You can find a full list of configurations in `AppConfigurations` interface.

## Develop

The widget dev setup is similar to regular client application. To get started:

```bash
npm i
npm start
```

This will open browser with "demo" page which hosts the widget.

## Notes

1. You'll need to restart your develop server after every change to your tailwind.config.js to pick up the changes.

---
_Source: https://npm.io/package/vop-embed · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._