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.
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>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.
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.
The project status element has three options to be positioned:
| Image | Position | default |
|---|---|---|
 |
bottom right |
yes |
 |
bottom center |
no |
 |
bottom left |
no |
Use it like so: position="bottom center" to overwrite the default.