Meh-footer-web-component NPM

meh-footer

Install using NPM

Run npm i meh-footer-web-component or yarn add meh-footer-web-component; Afterwards, just import the web component using import 'meh-footer-web-component', so it will be globally available.

Usage in HTML DOM

First, include your library. If you're using a node-based framework like React / Vue, use the following snippet:

import 'meh-footer-web-component';

// OR using a require:

require('meh-footer-web-component');

or in plain HTML:

<head>
  ...
  <script
    src="https://unpkg.com/meh-footer-web-component@latest/build/min/main.js"
    type="module"
  ></script>
</head>

Wether you're using React, Vue or just plain HTML, you can add your footer using the following snippet:

// implements the regular footer
<meh-footer></meh-footer>

// Implements the project status pill and blocking overlay
<meh-project-status wrike-project-id="XXXXXXX"></meh-project-status>

Special note: Server Side Rendering

In case your app uses SSR (Server Side Rendering), you need to check wether the rendering is done server side or client side. The web component doesn't support server side rendering at this moment, as it makes use of apis that exist only in the web browser. We advise you to use the script tag mentioned above.

Configuring

To configure your project status element, two options are available. Either pass in the wrike-project-id (API ID) or wrike-project-id-api-v2 (in Wrike URL ID). Any valid id will be resolved to the correct project information.