Skip to main content

Widget Integration Guide

A comprehensive guide for integrating the CuracelAuto Assessment Widget into your web applications. This widget provides a seamless iframe-based interface for vehicle assessments with support for both pre-policy and post-loss evaluations.

Installation​

Add one of the following script tags to your HTML <head> section:

Sandbox Environment (Development/Testing)​

<script src="https://sandbox.d167z7gdtvvaci.amplifyapp.com/curacel-auto-widget.umd.v0.1.0.js"></script>

Production Environment​

<script src="https://main.d167z7gdtvvaci.amplifyapp.com/curacel-auto-widget.umd.v0.1.0.js"></script>
EnvironmentURLUse Case
Sandboxhttps://sandbox.d167z7gdtvvaci.amplifyapp.com/curacel-auto-widget.umd.v0.1.0.jsDevelopment, testing, and integration
Productionhttps://main.d167z7gdtvvaci.amplifyapp.com/curacel-auto-widget.umd.v0.1.0.jsLive applications and production use

Option 2: NPM​

Coming soon!

Quick Start​

Basic Implementation​

// Create widget instance
const widget = CuracelAuto.createAssessmentWidget({
  assessmentType: 'pre_policy',
  callback: (message) => {
    console.log('Widget message:', message);
    if (message.type === 'curacel.assessment.submitted') {
      widget.close();
    }
  },
  profileKey: 'curacel',
  transactionId: 'your-unique-transaction-id',
});

// Open the widget
widget.open();

Configuration Options​

OptionTypeRequiredDefaultDescription
profileKeystringYes-Your Curacel profile key
transactionIdstringYes-Unique transaction identifier
assessmentType'pre_policy' \| 'post_loss'Yes-Type of assessment to perform
callback(message: any) => voidYes-Function to handle widget events
containerHTMLElementNobodyDOM element for inline widget
heightnumberNo100Widget height
heightUnit'vh' \| 'px'No'vh'CSS unit for height
size'normal' \| 'large'No'normal'Widget width: 500px or 800px
type'inline' \| 'modal'No'inline'Display mode

Widget Events​

The callback function receives various events from the widget. Here's a comprehensive list of all supported events:

Event TypeDescription
curacel.assessment.submittedAssessment completed and submitted successfully
curacel.assessment.errorAn error occurred during assessment
curacel.assessment.closedWidget was closed by user or programmatically

Implementation Examples​

1. Modal Widget​

const widget = CuracelAuto.createAssessmentWidget({
  profileKey: 'curacel', // replace with you key
  transactionId: 'txn-123', // replace with your unique transaction id
  assessmentType: 'pre_policy',
  callback: (message) => {
    if (message.type === 'curacel.assessment.submitted') {
      console.log('Assessment completed:', message.data);
      widget.close();
    } else if (message.type === 'curacel.assessment.error') {
      console.error('Assessment error:', message.data.error);
    } else if (message.type === 'curacel.assessment.closed') {
      console.log('Widget closed');
    }
  },
  type: 'modal',
  size: 'large',
  height: 90,
  heightUnit: 'vh',
});

widget.open();

2. Inline Widget (Default Container)​

const widget = CuracelAuto.createAssessmentWidget({
  profileKey: 'curacel',
  transactionId: 'txn-456',
  assessmentType: 'post_loss',
  callback: (message) => {
    if (message.type === 'curacel.assessment.submitted') {
      // Handle successful submission
      const images = message.data.images;
      const assessmentId = message.data.assessment_id;
      // Process assessment data...
    }
  },
  type: 'inline',
  size: 'normal',
  height: 60,
  heightUnit: 'vh',
});

widget.open();

3. Inline Widget (Custom Container)​

<div id="my-widget-container"></div>

<script>
const container = document.getElementById('my-widget-container');
const widget = CuracelAuto.createAssessmentWidget({
  profileKey: 'curacel',
  transactionId: 'txn-789',
  assessmentType: 'pre_policy',
  callback: (message) => {
    // Handle all widget events
  },
  container,
  type: 'inline',
  size: 'large',
  height: 80,
  heightUnit: 'vh',
});

widget.open();
</script>

Reusing Widget for Multiple Transactions​

You can reuse the same widget instance for multiple transactions by passing a new transactionId to the open() method:

// Initial transaction
widget.open('txn-001');

// Later, for a new transaction
widget.open('txn-002'); // Reuses the same widget instance

This is useful for applications where users perform multiple assessments in sequence.

Event Handling Best Practices​

1. Handle All Event Types​

const widget = CuracelAuto.createAssessmentWidget({
  // ... other options
  callback: (message) => {
    switch (message.type) {
      case 'curacel.assessment.submitted':
        // Process successful assessment
        handleAssessmentSubmission(message.data);
        widget.close();
        break;
        
      case 'curacel.assessment.error':
        // Handle errors gracefully
        showErrorMessage(message.data.error);
        break;
        
      case 'curacel.assessment.closed':
        // Clean up or show completion message
        handleWidgetClose();
        break;
        
      default:
        // Log unknown events for debugging
        console.log('Unknown event:', message);
    }
  },
});

2. Error Handling​

callback: (message) => {
  if (message.type === 'curacel.assessment.error') {
    // Show user-friendly error message
    const errorMessage = message.data.error || 'An unexpected error occurred';
    showNotification(errorMessage, 'error');
    
    // Optionally retry or provide alternative actions
    showRetryButton();
  }
}

3. Assessment Data Processing​

callback: (message) => {
  if (message.type === 'curacel.assessment.submitted') {
    const { images, assessment_id, transaction_id } = message.data;
    
    // Store assessment data on your app
    saveAssessmentData({
      assessmentId: assessment_id,
      transactionId: transaction_id,
      images: images,
      timestamp: message.timestamp
    });
    
    // Update UI or return control to your app
    updateAssessmentStatus('completed');
    
    // Close widget
    widget.close();
  }
}

Styling and Customization​

Modal widgets automatically include:

  • Semi-transparent backdrop
  • Centered positioning
  • Close button in top-right corner
  • Responsive design

Inline Widget Styling​

For inline widgets, you can customize the container as needed:

#my-widget-container {
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  padding: 20px;
  background: #f9f9f9;
  margin: 20px 0;
}

Troubleshooting​

Common Issues​

  1. Widget not loading: Check that the script URL is correct and accessible
  2. Events not received: Ensure the callback function is properly defined
  3. Modal not displaying: Verify that no CSS is interfering with z-index or positioning
  4. Camera/geolocation not working: Ensure the user has given proper permissions
  5. Content Security Policy: Contact support team to whitelist your domain

Debug Mode​

Enable console logging to debug widget behavior:

const widget = CuracelAuto.createAssessmentWidget({
  // ... options
  callback: (message) => {
    console.log('Widget Event:', message);
    // Your event handling logic
  },
});

Browser Support​

The widget supports all modern browsers