Clumis Widget Test Page

Widget Configuration

Quest ID

Business ID

Auth Token (Optional)

Theme

Position

Size (px)

Width (px)

Max Height (%)

Title

Coin Name

Coin Icon Type

Enable Standalone Auth

Widget Preview

Widget Events

Event Log

Waiting for widget events...

Widget API

Manual Widget Control

You can control the widget manually using JavaScript:


window.ClumisWidget({
  questId: 'your-quest-id',
  businessId: 'your-business-id',
  authToken: 'optional-auth-token',
  theme: 'oceanic',
  position: 'bottom-right',
  size: 120,
  width: 400,
  maxHeight: 70,
  title: 'Custom Rewards',
  coinName: 'Points',
  coinIconType: 'star',
  enableStandaloneAuth: true,
  onQuestComplete: (questId, rewards) => {
    console.log(`Quest ${questId} completed with ${rewards} rewards!`);
  },
  onActivityComplete: (activityId, response) => {
    console.log(`Activity ${activityId} completed with response:`, response);
  },
  onError: (error) => {
    console.error('Widget error:', error);
  },
  onAuthChange: (user) => {
    console.log('User authentication changed:', user);
  }
});

Integration Examples

HTML Integration

Add this script to your website's section:

React Integration

Install the widget via NPM and use it in your React application:


import { ClumisQuestWidget } from './src/index.ts';

function App() {
  return (
    
       {
          console.log(`Quest ${questId} completed with ${rewards} rewards!`);
        }}
        onError={(error) => {
          console.error('Widget error:', error);
        }}
      />
    
  );
}