Usage

npm install apester-react-widgets # or yarn add apester-react-widgets

ApesterMediaWidget

import React from 'react'
import { ApesterMediaWidget } from 'apester-react-widgets';

interface WidgetProps {
    id?: string;
    height?: string;
    className?: string;
    results?: string;
    autoCloseOnFinish?: boolean;
    autoCloseTimeout?: number;
    'data-media-id': string;
    'data-token'?: string;
    'data-campaign-id'?: string;
    'data-auto-fullscreen'?: string;
    'data-manual-top'?: string;
    'data-manual-top-desktop'?: string;
    'data-manual-top-mobile'?: string;
    'external-id'?: string;
    sandboxMode?: boolean;
    'agencyData'?: {
        agencyName: string;
        agencyImage: string;
    };
}

// Render your Apester unit
<ApesterMediaWidget data-media-id="{{apester unit id}}" />

ApesterEvent

This component injects event listener into your project.

import React, { useCallback } from 'react'
import { ApesterEvent } from 'apester-react-widgets';

interface MessageValues {
    type: 'picked_answer' | 'refresh_companion_ad' | 'finished_interaction' | 'last_slide_reached' | 'fullscreen_on' | 'fullscreen_off' | 'apester_resize_unit'| 'apester_interaction_loaded' | 'slide_loaded'
    data: {
        answerId: string
        answerText: string
        interactionId: string
        interactionIndex: number
        interactionTitle: string
        slideId: string
        slideTitle: string
        slidePosition: number
        isCorrectAnswer: boolean
    }
}

interface ApesterEventProps {
    callback: (data: MessageValues['data'], type: MessageValues['type']) => void;
    type: MessageValues['type']
}



const callback = useCallback((data, type) => {
    console.log('unit data', data);
    console.log('type', type);
}, []);

<ApesterEvent type="picked_answer" callback={callback} />