Quickstart
Before you start working with Dyte's Plugin SDK, make sure you've read the Getting Started with Dyte guide.
Short on time? No problem. This document covers everything you need in order to quickly get started with building your own collaborative plugin.
Create a plugin
You can use Dyte CLI to create your plugin.
cd <your-project-directory>
dyte plugins create
This command asks you a bunch of questions and then generates a
dyte-config.json
for you. This file must always stay in the root of your
folder.
Configure your plugin
You can customise a bunch of properties for your plugin using this config file. It allows you to change the name, description, logo, build config and more. Read More
Do not change the value of pluginId
in your config file.
Here's what a basic config file would look like:
{
"name": "my-plugin",
"version": "1.x.x",
"description": "Add a short description for your plugin here",
"pluginId": "79936149-758e-4d8d-8366-23deaxxxxxxx",
"picture": "https://dyte-uploads.s3.ap-south-1.amazonaws.com/dyte.png",
"url": "https://79936149-758e-4d8d-8366-23deaxxxxxxx-latest.plugins.dyte.app",
"files": {
"include": ["index.html", "**/*"],
"exclude": ["**/*.ts", "*.md"]
},
"tags": ["#plugin"],
"author": "",
"repository": ""
}
Setup your development environment
Now that your plugin is created, It's time to start building. Dyte's devTools
module provides a live playground like experience to help you build your plugin
locally.
The code snippet below shows how you can use it:
<body>
<dyte-meeting id="my-meeting"></dyte-meeting>
<script>
const init = async () => {
const meeting = await DyteClient.init({
authToken: '',
roomName: '',
defaults: {
audio: true,
video: true,
},
modules: {
devTools: {
plugin: [{
name: 'My Awesome Plugin',
port: '5000'
}],
}}});
document.getElementById('my-meeting').meeting = meeting;
};
init();
</script>
</body>
Now run your plugin on the port specified, In this case localhost:5000
. Et
voila! Your live plugin is now available to be developed locally.
Start building
Installation
- npm
- yarn
- CDN
npm install @dytesdk/plugin-sdk
yarn add @dytesdk/plugin-sdk
<script src="https://cdn.jsdelivr.net/npm/@dytesdk/plugin-sdk" />
Usage
This is a simple plugin that greets every new person who joins the meeting.
import DytePlugin from '@dytesdk/plugin-sdk';
const plugin = DytePlugin.init();
await plugin.stores.populate('storeName');
plugin.room.on('peerJoined', async (p) => {
const message: ChatMessage = {
type: 'text',
message: `Welcome ${p.displayName}! We hope you bought pizza ;)`,
};
await plugin.room.sendChatMessage(message);
});