Luucy Embed

Embed luucy into your webpage! Connect to your own plugin and exchange messages between your plugin and your webpage.

React Component

A react component rendering and managing the LUUCY embed can be found in ../lib/react/luucy-embed.tsx.

Example usage in Code:

import { useCallback } from 'react';
import { LuucyEmbed, type LuucyEmbedData } from 'luucy-embed/lib/react';

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}
    />
  )

Example Applications

Sample React App

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/.

Sample LUUCY Plugin

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.

Vanilla Javascript

A full HTML + JS example is available in sample-html-app/.