Skip to main content

Installation

Package Installation​

Install via npm, yarn, or pnpm:

# npm
npm install @flowstack/embed-sdk

# yarn
yarn add @flowstack/embed-sdk

# pnpm
pnpm add @flowstack/embed-sdk

CDN (Script Tag)​

For non-bundled applications, include via CDN:

<script src="https://cdn.onflowstack.com/sdk/v1/embed.min.js"></script>

This exposes window.FlowStack globally.

Framework Examples​

React​

import { FlowStackEmbed } from '@flowstack/embed-sdk';

function App() {
  const [token, setToken] = useState<string | null>(null);

  useEffect(() => {
    fetch('/api/flowstack-token')
      .then(res => res.json())
      .then(data => setToken(data.token));
  }, []);

  if (!token) return <div>Loading...</div>;

  return (
    <FlowStackEmbed
      token={token}
      view="builder"
      style={{ width: '100%', height: '600px' }}
    />
  );
}

Vue 3​

<template>
  <FlowStackEmbed
    v-if="token"
    :token="token"
    view="builder"
    :style="{ width: '100%', height: '600px' }"
  />
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { FlowStackEmbed } from '@flowstack/embed-sdk/vue';

const token = ref(null);

onMounted(async () => {
  const res = await fetch('/api/flowstack-token');
  const data = await res.json();
  token.value = data.token;
});
</script>

Vanilla JavaScript​

<div id="flowstack-container" style="width: 100%; height: 600px;"></div>

<script src="https://cdn.onflowstack.com/sdk/v1/embed.min.js"></script>
<script>
  fetch('/api/flowstack-token')
    .then(res => res.json())
    .then(data => {
      FlowStack.embed({
        container: '#flowstack-container',
        token: data.token,
        view: 'builder',
      });
    });
</script>

Backend Token Generation​

Your backend must generate a JWT token for each user session. See Authentication for implementation details.