Interactive Tutorials SDK

<script
  src="https://app.stepyo.com.br/sdk.js"
  data-api-key="YOUR_API_KEY"
  data-lang="en"
  async
></script>

<script
  src="https://app.stepyo.com.br/sdk.js"
  data-api-key="YOUR_API_KEY"
  data-lang="en"
  data-position="bottom-right"
  data-color="#EC4899"
  data-button-text="Need help?"
  data-title="Help Center"
  data-icon="help"
  data-user-id="user_123"
  data-user-email="[email protected]"
  async
></script>

// components/StepyoWidget.tsx
'use client';
import { useEffect } from 'react';

export function StepyoWidget() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://app.stepyo.com.br/sdk.js';
    script.async = true;
    script.dataset.apiKey = process.env.NEXT_PUBLIC_STEPYO_KEY!;
    script.dataset.lang = 'en';
    document.head.appendChild(script);

    return () => {
      (window as any).Stepyo?.destroy();
      script.remove();
    };
  }, []);

  return null;
}

// In your layout: <StepyoWidget />

<!-- StepyoWidget.vue -->
<script setup>
import { onMounted, onUnmounted } from 'vue';

const props = defineProps({ apiKey: String });

onMounted(() => {
  const s = document.createElement('script');
  s.src = 'https://app.stepyo.com.br/sdk.js';
  s.dataset.apiKey = props.apiKey;
  s.async = true;
  document.head.appendChild(s);
});

onUnmounted(() => window.Stepyo?.destroy());
</script>

npm install @stepyo/sdk

import Stepyo from '@stepyo/sdk';

Stepyo.init({
  apiKey: 'your_api_key_here',
  lang: 'en',
});

npm install @stepyo/server

import { StepyoServer } from '@stepyo/server';

const stepyo = new StepyoServer({
  apiKey: process.env.STEPYO_SECRET_KEY,
});

// List all active flows
const flows = await stepyo.listFlows();

// Get a specific flow with steps
const flow = await stepyo.getFlow('welcome-tour');

// AI-powered flow suggestion
const suggestion = await stepyo.ask('How do I create a report?');

// Track a custom event
await stepyo.trackEvent({
  name: 'onboarding_completed',
  userId: 'user_123',
  properties: { plan: 'pro' },
});

pip install stepyo

from stepyo import StepyoServer

stepyo = StepyoServer(api_key="your_secret_key")

# List all active flows
flows = stepyo.list_flows()

# Get a specific flow with steps
flow = stepyo.get_flow("welcome-tour")

# AI-powered flow suggestion
suggestion = stepyo.ask("How do I create a report?")

# Track a custom event
stepyo.track_event(
    name="onboarding_completed",
    user_id="user_123",
    properties={"plan": "pro"},
)

# Flask
from flask import Flask, request, jsonify
from stepyo import StepyoServer

app = Flask(__name__)
stepyo = StepyoServer(api_key="your_secret_key")

@app.route("/webhooks/stepyo", methods=["POST"])
def handle_webhook():
    signature = request.headers.get("X-Stepyo-Signature", "")
    if not stepyo.verify_webhook(request.data, signature):
        return jsonify({"error": "Invalid signature"}), 401
    event = request.json
    print(f"Received: {event['event']}")
    return jsonify({"ok": True})

# FastAPI
from fastapi import FastAPI, Request, HTTPException

app = FastAPI()

@app.post("/webhooks/stepyo")
async def handle_webhook(request: Request):
    body = await request.body()
    signature = request.headers.get("X-Stepyo-Signature", "")
    if not stepyo.verify_webhook(body, signature):
        raise HTTPException(status_code=401)
    event = await request.json()
    return {"ok": True}

# Django
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt

@csrf_exempt
def stepyo_webhook(request):
    signature = request.headers.get("X-Stepyo-Signature", "")
    if not stepyo.verify_webhook(request.body, signature):
        return JsonResponse({"error": "Invalid signature"}, status=401)
    import json
    event = json.loads(request.body)
    return JsonResponse({"ok": True})

Stepyo.init({
  apiKey: 'your_api_key_here',
  lang: 'en',               // 'en' | 'pt-BR'
  position: 'bottom-right', // 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
  primaryColor: '#EC4899',  // hex
  buttonText: 'Help',       // button label (empty = icon only)
  panelTitle: 'Tutorials',
  buttonIcon: 'help',       // 'help'|'chat'|'book'|'zap'|'sparkles'|'headphones' or URL
});

Stepyo.identify({
  userId: 'user_123',
  email: '[email protected]',
  name: 'Jane Smith',
  traits: { role: 'admin', plan: 'pro' }
});

// Trigger tutorial when user creates an account
Stepyo.startFlow('welcome-tour');

Stepyo.on('flow:completed', (data) => {
  console.log('Tutorial completed:', data.flowKey);
  // Mark onboarding as complete in your backend
});

Stepyo.on('ready', () => {
  // SDK loaded, safe to use startFlow
});

console.log(Stepyo.version); // "2.0.0"

https://yourapp.com/dashboard?stepyo-flow=welcome-tour

{
  "id": "evt_abc123",
  "event": "flow_completed",
  "timestamp": "2026-03-19T12:00:00Z",
  "data": {
    "flow_key": "welcome-tour",
    "flow_name": "Welcome Tour",
    "user_id": "user_123",
    "user_email": "[email protected]",
    "duration_ms": 45200
  },
  "workspace_id": "ws_xyz"
}

import crypto from 'crypto';

function verifyWebhookSignature(body, signature, secret) {
  const expected = 'sha256=' + crypto
    .createHmac('sha256', secret)
    .update(body, 'utf8')
    .digest('hex');

  return crypto.timingSafeEqual(
    Buffer.from(expected),
    Buffer.from(signature)
  );
}

// Express middleware
app.post('/webhooks/stepyo', express.raw({ type: '*/*' }), (req, res) => {
  const sig = req.headers['x-stepyo-signature'];
  if (!verifyWebhookSignature(req.body, sig, process.env.WEBHOOK_SECRET)) {
    return res.status(401).json({ error: 'Invalid signature' });
  }
  const event = JSON.parse(req.body);
  console.log('Event:', event.event);
  res.json({ ok: true });
});

import hmac
import hashlib

def verify_signature(body: bytes, signature: str, secret: str) -> bool:
    expected = "sha256=" + hmac.new(
        secret.encode(), body, hashlib.sha256
    ).hexdigest()
    return hmac.compare_digest(expected, signature)

x-stepyo-key: sk_live_abc123...

{
  "error": "Rate limit exceeded",
  "code": "RATE_LIMITED",
  "retryAfter": 30
}

<script src="https://app.stepyo.com.br/sdk.js" ...></script>

<script src="https://app.stepyo.com.br/[email protected]" ...></script>

if (Stepyo.version !== '2.0.0') {
  console.warn('Unexpected SDK version:', Stepyo.version);
}