Quick Start - Tenant Integration

Get up and running with the Cimigo Collect Platform in just 5 minutes. This guide will help you embed your first survey and start collecting responses immediately.

📋 What You Need

Before you begin, ensure you have:

✅ Tenant Account - Contact Cimigo for platform access
✅ API Credentials - Your tenant ID and API key
✅ Web Application - Where you'll embed the survey
✅ Basic JavaScript Knowledge - For SDK integration

🚀 5-Minute Integration

Step 1: Install the SDK

Choose your preferred installation method:

# Using npm
npm install @cimigo/collect-sdk

# Using yarn
yarn add @cimigo/collect-sdk

# Using CDN (for vanilla JS)
<script src="https://cdn.cimigo.com/collect-sdk/latest/cimigo-collect.min.js"></script>

Step 2: Initialize the SDK

import { CimigoCollect } from '@cimigo/collect-sdk';

// Initialize with your tenant configuration
const collect = new CimigoCollect({
  apiBaseUrl: 'https://collect-api.cimigo.online',
  tenantId: 'your-tenant-id-here',
  apiKey: 'your-api-key-here' // Optional: for authenticated operations
});

Step 3: Create a Simple Survey

// Create a basic customer satisfaction survey
const surveyDefinition = {
  schema_version: '1.2',
  version: 1,
  survey: {
    title: 'Customer Satisfaction Survey',
    description: 'Help us improve our service',
    supported_languages: ['en'],
    pages: [{
      questions: [
        {
          id: 'satisfaction',
          type: 'rating',
          title: 'How satisfied are you with our service?',
          required: true,
          max: 5,
          leftLabel: 'Very poor',
          rightLabel: 'Excellent'
        },
        {
          id: 'feedback',
          type: 'textarea',
          title: 'Any additional feedback?',
          placeholder: 'Tell us what you think...',
          maxLength: 500
        }
      ]
    }]
  }
};

// Create the survey
const survey = await collect.createSurvey(surveyDefinition);
console.log('Survey created:', survey.id);

Step 4: Create a Survey Link

// Create a public link for the survey
const link = await collect.createLink({
  surveyId: survey.id,
  name: 'Customer Satisfaction Link',
  settings: {
    multipleResponses: false,
    expires: null // No expiration
  }
});

console.log('Survey link:', link.url);

Step 5: Display the Survey

Choose how you want to display your survey:

// Show survey as a modal overlay
await collect.showSurvey({
  linkId: link.id,
  mode: 'widget',
  theme: {
    primaryColor: '#1976d2',
    logoUrl: 'https://your-company.com/logo.png'
  },
  onComplete: (response) => {
    console.log('Survey completed!', response);
    // Handle the response
  }
});

Option B: Inline Embed

// Embed survey directly in a container
await collect.showSurvey({
  linkId: link.id,
  mode: 'inline',
  container: '#survey-container',
  theme: {
    primaryColor: '#1976d2'
  }
});

Option C: Iframe

// Display in an iframe
await collect.showSurvey({
  linkId: link.id,
  mode: 'iframe',
  container: '#iframe-container',
  height: '600px'
});

Step 6: Handle Responses

// Listen for survey events
collect.on('response.submitted', (event) => {
  console.log('New response received:', event.data);
  
  // Process the response
  const { satisfaction, feedback } = event.data;
  
  // Send to your analytics
  analytics.track('Survey Completed', {
    satisfaction: satisfaction,
    hasComment: !!feedback
  });
  
  // Show thank you message
  showThankYou();
});

collect.on('survey.started', (event) => {
  console.log('Survey started:', event.surveyId);
});

collect.on('survey.closed', (event) => {
  console.log('Survey closed without completion');
});

🎯 Complete Example

Here's a complete working example you can copy and paste:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Survey Integration Example</title>
</head>
<body>
    <div id="app">
        <h1>Welcome to Our Service</h1>
        <p>We'd love to hear your feedback!</p>
        
        <button id="survey-button">Take Survey</button>
        <div id="survey-container"></div>
        
        <div id="thank-you" style={{display: 'none'}}>
            <h2>Thank You!</h2>
            <p>Your feedback has been received.</p>
        </div>
    </div>

    <script src="https://cdn.cimigo.com/collect-sdk/latest/cimigo-collect.min.js"></script>
    <script>
        // Initialize the SDK
        const collect = new CimigoCollect({
            apiBaseUrl: 'https://collect-api.cimigo.online',
            tenantId: 'your-tenant-id-here'
        });

        // Survey configuration
        const SURVEY_LINK_ID = 'your-survey-link-id';

        // Show survey when button is clicked
        document.getElementById('survey-button').addEventListener('click', async () => {
            try {
                await collect.showSurvey({
                    linkId: SURVEY_LINK_ID,
                    mode: 'widget',
                    theme: {
                        primaryColor: '#2196f3',
                        logoUrl: 'https://your-company.com/logo.png'
                    },
                    onComplete: (response) => {
                        console.log('Survey completed:', response);
                        
                        // Hide survey button
                        document.getElementById('survey-button').style.display = 'none';
                        
                        // Show thank you message
                        document.getElementById('thank-you').style.display = 'block';
                    },
                    onClose: () => {
                        console.log('Survey closed');
                    }
                });
            } catch (error) {
                console.error('Error showing survey:', error);
                alert('Sorry, there was an error loading the survey.');
            }
        });

        // Optional: Auto-show survey after 5 seconds
        setTimeout(() => {
            document.getElementById('survey-button').click();
        }, 5000);
    </script>
</body>
</html>

🔧 Framework Integration Examples

React Integration

import React, { useState } from 'react';
import { useCimigoCollect } from '@cimigo/collect-react';

function SurveyComponent() {
  const [completed, setCompleted] = useState(false);
  const { showSurvey, isLoading } = useCimigoCollect({
    tenantId: 'your-tenant-id'
  });

  const handleShowSurvey = async () => {
    await showSurvey({
      linkId: 'your-survey-link-id',
      mode: 'widget',
      theme: {
        primaryColor: '#1976d2'
      },
      onComplete: (response) => {
        console.log('Survey completed:', response);
        setCompleted(true);
      }
    });
  };

  if (completed) {
    return (
      <div className="thank-you">
        <h2>Thank You!</h2>
        <p>Your feedback helps us improve our service.</p>
      </div>
    );
  }

  return (
    <div className="survey-section">
      <h2>We Value Your Feedback</h2>
      <p>Please take a moment to share your experience with us.</p>
      
      <button 
        onClick={handleShowSurvey}
        disabled={isLoading}
        className="survey-button"
      >
        {isLoading ? 'Loading...' : 'Take Survey'}
      </button>
    </div>
  );
}

export default SurveyComponent;

Vue.js Integration

<template>
  <div class="survey-component">
    <div v-if="!completed">
      <h2>We Value Your Feedback</h2>
      <p>Please take a moment to share your experience.</p>
      
      <button 
        @click="showFeedbackSurvey" 
        :disabled="loading"
        class="survey-button"
      >
        {{ loading ? 'Loading...' : 'Take Survey' }}
      </button>
    </div>
    
    <div v-else class="thank-you">
      <h2>Thank You!</h2>
      <p>Your feedback helps us improve our service.</p>
    </div>
  </div>
</template>

<script>
import { CimigoCollect } from '@cimigo/collect-sdk';

export default {
  name: 'SurveyComponent',
  data() {
    return {
      collect: null,
      loading: false,
      completed: false
    };
  },
  mounted() {
    this.collect = new CimigoCollect({
      tenantId: 'your-tenant-id'
    });
  },
  methods: {
    async showFeedbackSurvey() {
      this.loading = true;
      
      try {
        await this.collect.showSurvey({
          linkId: 'your-survey-link-id',
          mode: 'widget',
          theme: {
            primaryColor: '#1976d2'
          },
          onComplete: (response) => {
            console.log('Survey completed:', response);
            this.completed = true;
          }
        });
      } catch (error) {
        console.error('Error showing survey:', error);
        alert('Sorry, there was an error loading the survey.');
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>

<style scoped>
.survey-button {
  background: #1976d2;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.survey-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.thank-you {
  text-align: center;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 8px;
}
</style>

📊 Common Survey Examples

Customer Satisfaction (NPS)

const npsSurvey = {
  schema_version: '1.2',
  version: 1,
  survey: {
    title: 'Customer Satisfaction',
    supported_languages: ['en'],
    pages: [{
      questions: [
        {
          id: 'nps_score',
          type: 'nps',
          title: 'How likely are you to recommend us to a friend or colleague?',
          required: true,
          leftLabel: 'Not at all likely',
          rightLabel: 'Extremely likely'
        },
        {
          id: 'nps_reason',
          type: 'textarea',
          title: 'What is the primary reason for your score?',
          placeholder: 'Please explain your rating...',
          maxLength: 500,
          visibleIf: {
            dependsOn: 'nps_score',
            equalsAnyOf: [0, 1, 2, 3, 4, 5, 6] // Show for detractors and passives
          }
        }
      ]
    }]
  }
};

Product Feedback

const productFeedback = {
  schema_version: '1.2',
  version: 1,
  survey: {
    title: 'Product Feedback',
    supported_languages: ['en'],
    pages: [{
      questions: [
        {
          id: 'product_rating',
          type: 'rating',
          title: 'How would you rate our product?',
          required: true,
          max: 5
        },
        {
          id: 'features_used',
          type: 'multiple',
          title: 'Which features have you used?',
          maxSelect: 5,
          options: [
            { id: 'dashboard', label: 'Dashboard' },
            { id: 'reports', label: 'Reports' },
            { id: 'integrations', label: 'Integrations' },
            { id: 'api', label: 'API Access' },
            { id: 'mobile', label: 'Mobile App' }
          ]
        },
        {
          id: 'improvement_areas',
          type: 'textarea',
          title: 'What areas need improvement?',
          placeholder: 'Tell us what could be better...',
          maxLength: 1000
        }
      ]
    }]
  }
};

Event Registration

const eventRegistration = {
  schema_version: '1.2',
  version: 1,
  survey: {
    title: 'Event Registration',
    supported_languages: ['en'],
    pages: [{
      questions: [
        {
          id: 'full_name',
          type: 'text',
          title: 'Full Name',
          required: true,
          maxLength: 100
        },
        {
          id: 'email',
          type: 'text',
          title: 'Email Address',
          required: true,
          placeholder: 'example@company.com',
          maxLength: 255
        },
        {
          id: 'company',
          type: 'text',
          title: 'Company Name',
          maxLength: 200
        },
        {
          id: 'attendance_date',
          type: 'date',
          title: 'Preferred Attendance Date',
          required: true,
          min_date: '2025-10-01',
          max_date: '2025-10-31'
        },
        {
          id: 'dietary_requirements',
          type: 'multiple',
          title: 'Dietary Requirements',
          options: [
            { id: 'none', label: 'No special requirements' },
            { id: 'vegetarian', label: 'Vegetarian' },
            { id: 'vegan', label: 'Vegan' },
            { id: 'gluten_free', label: 'Gluten-free' },
            { id: 'other', label: 'Other (please specify in comments)' }
          ]
        }
      ]
    }]
  }
};

🔔 Webhook Integration

Set up webhooks to receive real-time notifications when surveys are completed:

// Configure webhook endpoint
const webhookConfig = {
  url: 'https://your-api.com/webhooks/survey-responses',
  events: ['response.submitted'],
  secret: 'your-webhook-secret'
};

// Register webhook
const webhook = await collect.createWebhook(webhookConfig);

// Your webhook endpoint should handle POST requests
app.post('/webhooks/survey-responses', (req, res) => {
  const { event, data, signature } = req.body;
  
  // Verify webhook signature
  const expectedSignature = crypto
    .createHmac('sha256', 'your-webhook-secret')
    .update(JSON.stringify(data))
    .digest('hex');
    
  if (`sha256=${expectedSignature}` !== signature) {
    return res.status(401).send('Invalid signature');
  }
  
  // Process the response
  if (event === 'response.submitted') {
    console.log('New survey response:', data);
    
    // Store in your database
    saveResponseToDatabase(data);
    
    // Send email notification
    sendNotificationEmail(data);
    
    // Update customer record
    updateCustomerProfile(data.personalization.customer_id, data.responses);
  }
  
  res.status(200).send('OK');
});

🎯 Next Steps

Congratulations! You now have a working survey integration. Here's what to explore next:

Immediate Actions

Customize Your Survey Theme - Match your brand colors and style (coming soon)
Set Up Webhooks - Get real-time response notifications (coming soon)
Export Your Data - Download and analyze responses (coming soon)

Advanced Features

Multi-language Surveys - Support multiple languages (coming soon)
Conditional Logic - Create dynamic surveys (coming soon)
Personalization - Pre-fill data and customize experience (coming soon)
Access Control - Restrict survey access (coming soon)

Integration Patterns

Framework Integration - Deep dive into React, Vue, Angular (coming soon)
API Integration - Direct backend integration (coming soon)
Performance Optimization - Fast, responsive surveys (coming soon)

Troubleshooting

SDK Troubleshooting - Common SDK issues (coming soon)
Integration FAQ - Frequently asked questions (coming soon)

🆘 Need Help?

If you encounter any issues:

Check the browser console for error messages
Verify your tenant ID and API key are correct
Ensure the survey link ID is valid and active
Review the FAQ for common solutions (coming soon)
Contact support at support@cimigo.com

🎉 Congratulations! You've successfully integrated the Cimigo Collect Platform and are now collecting valuable survey responses. Start gathering insights and improving your customer experience today!

📋 What You Need​

🚀 5-Minute Integration​

Step 1: Install the SDK​

Step 2: Initialize the SDK​

Step 3: Create a Simple Survey​

Step 4: Create a Survey Link​

Step 5: Display the Survey​

Option A: Modal Widget (Recommended)​

Option B: Inline Embed​

Option C: Iframe​

Step 6: Handle Responses​

🎯 Complete Example​

🔧 Framework Integration Examples​

React Integration​

Vue.js Integration​

📊 Common Survey Examples​

Customer Satisfaction (NPS)​

Product Feedback​

Event Registration​

🔔 Webhook Integration​

🎯 Next Steps​

Immediate Actions​

Advanced Features​

Integration Patterns​

Troubleshooting​

🆘 Need Help?​