Light Plugin — Installation
The Waymark Light Plugin can be installed either as an NPM package or via a <script> tag in your HTML.
The Light Plugin is a web component which you can include in your HTML to place a "Create video with Waymark" button on your site.
We also provide a React wrapper for the component for an improved integration experience in React projects.
NPM Package
npm install --save @waymark/waymark-sdkReact
// MyComponent.jsx
import { WaymarkLightPluginButton } from '@waymark/waymark-sdk/light-plugin-button-react';
export function MyComponent() {
return (
<div>
<WaymarkLightPluginButton partner-id="my-partner-id" />
</div>
);
}Svelte
<!-- MyComponent.svelte -->
<script>
import '@waymark/waymark-sdk/light-plugin-button';
</script>
<waymark-light-plugin-button partner-id="my-partner-id"></waymark-light-plugin-button>Vue
See Vue's "Using custom elements in Vue" documentation for details on how to set up your vue/vite config to support using custom elements.
<!-- component.vue -->
<script>
import '@waymark/waymark-sdk/light-plugin-button';
</script>
<template>
<waymark-light-plugin-button partner-id="my-partner-id"></waymark-light-plugin-button>
</template>HTML script tag
You may use any trusted npm CDN such as https://www.unpkg.com or https://www.jsdelivr.com to
load the Waymark Light Plugin via a <script> tag at runtime.
Your script should import the following file path: @waymark/waymark-sdk@3.x.x/light-plugin-button/index.cdn.js
<!-- index.html -->
<html>
<head>
<script
src="https://cdn.jsdelivr.net/npm/@waymark/waymark-sdk@3.x.x/light-plugin-button/index.cdn.js"
async
></script>
</head>
<body>
<waymark-light-plugin-button partner-id="my-partner-id"></waymark-light-plugin-button>
</body>
</html>