@orquestra/onboarding-widget

Widget de onboarding interativo para guiar usuários através de fluxos passo a passo.

📦 Instalação

npm install @orquestra/onboarding-widget
# ou
yarn add @orquestra/onboarding-widget

🚀 Uso Rápido

Via npm/import

import { initOnboardingWidget, openOnboardingFlow } from '@orquestra/onboarding-widget';

// Inicializar widget
initOnboardingWidget({
  company: 'sua-empresa',
  userId: '[email protected]',
  primaryColor: '#667eea',
  secondaryColor: '#ffffff',
  buttonText: '🚀 Começar Jornada',
  headerTitle: 'Onboardings Disponíveis',
  baseUrl: 'https://backend-flow.js-webdev.com.br/api'
});

// Abrir um fluxo específico
openOnboardingFlow('flow-id-aqui');

Via Script Tag (CDN)

<script src="https://backend-flow.js-webdev.com.br/api/onboarding/widget.js"></script>
<script>
  window.initOnboardingWidget({
    company: 'sua-empresa',
    userId: '[email protected]',
    primaryColor: '#667eea'
  });
</script>

⚙️ Configuração

interface OnboardingConfig {
  company: string;              // Obrigatório
  userId?: string;             // Opcional
  serverUrl?: string;          // URL do backend
  baseUrl?: string;            // Alias para serverUrl
  primaryColor?: string;       // Cor principal (padrão: '#5d03ca')
  secondaryColor?: string;     // Cor secundária (padrão: '#ffffff')
  autoOpen?: boolean;          // Abrir automaticamente (padrão: false)
  buttonText?: string;        // Texto do botão (padrão: '🎯 Onboarding')
  headerTitle?: string;        // Título do header (padrão: 'Onboardings Disponíveis')
}

📚 Exemplos

React/Next.js

import { useEffect } from 'react';
import { initOnboardingWidget } from '@orquestra/onboarding-widget';

function MyComponent() {
  useEffect(() => {
    initOnboardingWidget({
      company: 'minha-empresa',
      userId: '[email protected]',
      primaryColor: '#667eea',
      autoOpen: false
    });
  }, []);

  return <div>Meu componente</div>;
}

Vue.js

import { initOnboardingWidget } from '@orquestra/onboarding-widget';

export default {
  mounted() {
    initOnboardingWidget({
      company: 'minha-empresa',
      userId: '[email protected]'
    });
  }
};

🔧 API

initOnboardingWidget(config: OnboardingConfig)

Inicializa o widget de onboarding com a configuração fornecida.

openOnboardingFlow(flowId: string)

Abre um fluxo de onboarding específico pelo ID.

📝 Notas

• O widget requer que widget.js seja carregado do backend para funcionar completamente (botão flutuante, lista de onboardings)
• O pacote npm fornece apenas a função openOnboardingFlow e configuração básica
• Para funcionalidade completa, use o script tag ou carregue widget.js separadamente

📄 Licença

MIT

Widget de onboarding interativo para guiar usuários através de fluxos passo a passo.

📦 Instalação

npm install @orquestra/onboarding-widget
# ou
yarn add @orquestra/onboarding-widget

🚀 Uso Rápido

Via npm/import

import { initOnboardingWidget, openOnboardingFlow } from '@orquestra/onboarding-widget';

// Inicializar widget
initOnboardingWidget({
  company: 'sua-empresa',
  userId: '[email protected]',
  primaryColor: '#667eea',
  secondaryColor: '#ffffff',
  buttonText: '🚀 Começar Jornada',
  headerTitle: 'Onboardings Disponíveis',
  baseUrl: 'https://backend-flow.js-webdev.com.br/api'
});

// Abrir um fluxo específico
openOnboardingFlow('flow-id-aqui');

Via Script Tag (CDN)

<script src="https://backend-flow.js-webdev.com.br/api/onboarding/widget.js"></script>
<script>
  window.initOnboardingWidget({
    company: 'sua-empresa',
    userId: '[email protected]',
    primaryColor: '#667eea'
  });
</script>

⚙️ Configuração

interface OnboardingConfig {
  company: string;              // Obrigatório
  userId?: string;             // Opcional
  serverUrl?: string;          // URL do backend
  baseUrl?: string;            // Alias para serverUrl
  primaryColor?: string;       // Cor principal (padrão: '#5d03ca')
  secondaryColor?: string;     // Cor secundária (padrão: '#ffffff')
  autoOpen?: boolean;          // Abrir automaticamente (padrão: false)
  buttonText?: string;        // Texto do botão (padrão: '🎯 Onboarding')
  headerTitle?: string;        // Título do header (padrão: 'Onboardings Disponíveis')
}

📚 Exemplos

React/Next.js

import { useEffect } from 'react';
import { initOnboardingWidget } from '@orquestra/onboarding-widget';

function MyComponent() {
  useEffect(() => {
    initOnboardingWidget({
      company: 'minha-empresa',
      userId: '[email protected]',
      primaryColor: '#667eea',
      autoOpen: false
    });
  }, []);

  return <div>Meu componente</div>;
}

Vue.js

import { initOnboardingWidget } from '@orquestra/onboarding-widget';

export default {
  mounted() {
    initOnboardingWidget({
      company: 'minha-empresa',
      userId: '[email protected]'
    });
  }
};

🔧 API

initOnboardingWidget(config: OnboardingConfig)

Inicializa o widget de onboarding com a configuração fornecida.

openOnboardingFlow(flowId: string)

Abre um fluxo de onboarding específico pelo ID.

📝 Notas

• O widget requer que widget.js seja carregado do backend para funcionar completamente (botão flutuante, lista de onboardings)
• O pacote npm fornece apenas a função openOnboardingFlow e configuração básica
• Para funcionalidade completa, use o script tag ou carregue widget.js separadamente

📄 Licença

MIT