Embed luucy into your webpage! Connect to your own plugin and exchange messages between your plugin and your webpage.
A react component rendering and managing the LUUCY embed can be found in ./sample-next-app/app/components/luucy-embed/luucy-embed.tsx
.
Example usage in Code:
import { useCallback } from 'react';
import { LuucyEmbed, type LuucyEmbedData } from 'luucy-embed';
export const SampleEmbed = () => {
const logMessage = useCallback((message: object) => {
console.log(JSON.stringify(message));
}, []);
const logError = useCallback((message: string) => console.error, []);
return(
<LuucyEmbed
data = {
source: 'https://app.luucy.ch',
workspaceUrl: 'LUUCY_Testing_LUUCY_Embed_Sample',
projectId: 10273,
variantId: 33419,
pluginName: 'sample-embed-plugin'
}
onMessage={logMessage}
onError={logError}
/>
)
A sample react app is available in sample-next-app/
.
A deployed version to test with is available at luucy.gitlab.io/sdk/luucy-embed/.
A sample LUUCY Plugin is available in sample-luucy-plugin/
.
A deployed version is available in the following Workspace:
- baseUrl:
https://app.luucy.ch
- workspaceUrl:
LUUCY_Testing_LUUCY_Embed_Sample
- projectId:
10273
- variantId:
33419
- pluginName:
sample-embed-plugin
You can directly open to test both the sample react app and sample plugin together.
A full HTML + JS example is available in sample-html-app/
.
Deployed to luucy.gitlab.io/sdk/luucy-embed/sample-html-app/.