Whitelabel Integration Docs

npm install @actionmodel/partner-sdk

import ActionModel from '@actionmodel/partner-sdk';

const widget = ActionModel.init({
  container: '#actionmodel-widget',
  partnerId: 'your-partner-uuid',
});

ActionModel.init({
  container: '#widget',
  partnerId: 'your-partner-uuid',
  theme: {
    colors: {
      primary: '#6366f1',
      primaryHover: '#4f46e5',
      background: '#ffffff',
      surface: '#f9fafb',
      border: '#e5e7eb',
      text: '#111827',
      textSecondary: '#374151',
      textMuted: '#6b7280',
      success: '#22c55e',
      warning: '#f97316',
      error: '#ef4444',
    },
    borderRadius: {
      sm: '6px',
      md: '8px',
    },
    fontFamily: "'Inter', system-ui, sans-serif",
  }
});

ActionModel.init({
  container: '#widget',
  partnerId: 'your-partner-uuid',
  theme: {
    colors: {
      primary: '#9000ff',
      primaryHover: '#7406c3',
      background: '#1a1a1a',
      surface: '#292929',
      border: '#3d3d3d',
      text: '#ffffff',
      textSecondary: '#bdbdbd',
      textMuted: '#7c7c7c',
      success: '#4ade80',
      warning: '#f97316',
      error: '#ef4444',
    }
  }
});

'use client';

import dynamic from 'next/dynamic';
import { useEffect, useRef } from 'react';

function ActionModelWidgetInner({ partnerId, userId }) {
  const containerRef = useRef(null);
  const widgetRef = useRef(null);

  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://cdn.actionmodel.com/sdk/actionmodel-sdk.min.js';
    script.async = true;

    script.onload = () => {
      if (containerRef.current && window.ActionModel) {
        widgetRef.current = window.ActionModel.init({
          container: containerRef.current,
          partnerId,
          user: userId ? { externalId: userId } : undefined,
        });
      }
    };

    document.body.appendChild(script);

    return () => {
      widgetRef.current?.destroy();
      script.remove();
    };
  }, [partnerId, userId]);

  return <div ref={containerRef} style={{ minHeight: 400 }} />;
}

// Export with SSR disabled
const ActionModelWidget = dynamic(
  () => Promise.resolve(ActionModelWidgetInner),
  { ssr: false }
);

export default ActionModelWidget;

// app/training/page.tsx
import ActionModelWidget from '@/components/ActionModelWidget';

export default function TrainingPage() {
  return (
    <main>
      <h1>Complete Training Tasks</h1>
      <ActionModelWidget partnerId="your-partner-uuid" />
    </main>
  );
}

<template>
  <div ref="container" style="min-height: 400px"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';

const props = defineProps({
  partnerId: { type: String, required: true },
  userId: { type: String, default: null },
  userEmail: { type: String, default: null },
});

const emit = defineEmits(['event']);

const container = ref(null);
let widget = null;
let script = null;

function initWidget() {
  if (!window.ActionModel || !container.value) return;

  widget = window.ActionModel.init({
    container: container.value,
    partnerId: props.partnerId,
    user: props.userId ? {
      externalId: props.userId,
      email: props.userEmail,
    } : undefined,
    onEvent: (event) => {
      emit('event', event);
    }
  });
}

onMounted(() => {
  script = document.createElement('script');
  script.src = 'https://cdn.actionmodel.com/sdk/actionmodel-sdk.min.js';
  script.async = true;
  script.onload = initWidget;
  document.body.appendChild(script);
});

onUnmounted(() => {
  widget?.destroy();
  script?.remove();
});

// Reinitialize when user changes
watch(() => props.userId, () => {
  widget?.destroy();
  initWidget();
});
</script>

<template>
  <ActionModelWidget
    :partner-id="partnerId"
    :user-id="user?.id"
    @event="handleEvent"
  />
</template>

<script setup>
import ActionModelWidget from '@/components/ActionModelWidget.vue';

const partnerId = 'your-partner-uuid';
const user = useUser(); // Your composable

function handleEvent(event) {
  console.log('Widget event:', event);
}
</script>

// actionmodel-widget.component.ts
import {
  Component,
  Input,
  ElementRef,
  OnInit,
  OnDestroy,
  Output,
  EventEmitter
} from '@angular/core';

declare global {
  interface Window {
    ActionModel: any;
  }
}

@Component({
  selector: 'app-actionmodel-widget',
  template: '<div #container style="min-height: 400px"></div>',
})
export class ActionModelWidgetComponent implements OnInit, OnDestroy {
  @Input() partnerId!: string;
  @Input() userId?: string;
  @Output() widgetEvent = new EventEmitter<any>();

  private widget: any;
  private script?: HTMLScriptElement;

  constructor(private elementRef: ElementRef) {}

  ngOnInit() {
    this.loadScript();
  }

  ngOnDestroy() {
    this.widget?.destroy();
    this.script?.remove();
  }

  private loadScript() {
    this.script = document.createElement('script');
    this.script.src = 'https://cdn.actionmodel.com/sdk/actionmodel-sdk.min.js';
    this.script.onload = () => this.initWidget();
    document.body.appendChild(this.script);
  }

  private initWidget() {
    const container = this.elementRef.nativeElement.querySelector('div');

    this.widget = window.ActionModel.init({
      container,
      partnerId: this.partnerId,
      user: this.userId ? { externalId: this.userId } : undefined,
      onEvent: (event: any) => {
        this.widgetEvent.emit(event);
      }
    });
  }
}

<app-actionmodel-widget
  [partnerId]="'your-partner-uuid'"
  [userId]="currentUser?.id"
  (widgetEvent)="onWidgetEvent($event)"
></app-actionmodel-widget>