Embedding Surveys

Display surveys directly on your website or application for a seamless user experience.

Embed Options

Inline Embed

Survey appears directly in your page content.

Best for:

  • Feedback forms on contact pages
  • Post-purchase surveys
  • In-app feedback
  • Documentation feedback

Popup/Modal

Survey appears in a lightbox overlay.

Best for:

  • Exit-intent surveys
  • Feature feedback
  • Quick polls
  • Reduced page space

Slide-In

Survey slides in from the side or bottom.

Best for:

  • Non-intrusive feedback
  • Customer satisfaction
  • Website feedback
  • Support ratings

Full Page

Survey takes over the entire page.

Best for:

  • Registration forms
  • Application forms
  • Detailed surveys
  • Assessment tests

Creating an Embed

Generate Embed Code

  1. Go to your survey’s Collect tab
  2. Click Website Embed
  3. Choose embed type
  4. Configure options
  5. Copy embed code

Basic Inline Embed

<!-- SurveyMethods Embed -->
<div id="survey-container"></div>
<script src="https://embed.surveymethods.com/v1/embed.js"></script>
<script>
  SurveyMethods.embed({
    surveyId: 'your-survey-id',
    container: '#survey-container'
  });
</script>
<script src="https://embed.surveymethods.com/v1/embed.js"></script>
<script>
  SurveyMethods.popup({
    surveyId: 'your-survey-id',
    trigger: 'button', // or 'time', 'exit', 'scroll'
    buttonText: 'Take Survey'
  });
</script>

Slide-In Embed

<script src="https://embed.surveymethods.com/v1/embed.js"></script>
<script>
  SurveyMethods.slideIn({
    surveyId: 'your-survey-id',
    position: 'bottom-right',
    trigger: {
      type: 'time',
      delay: 5000
    }
  });
</script>

Configuration Options

Display Settings

SurveyMethods.embed({
  surveyId: 'your-survey-id',
  container: '#survey-container',

  // Dimensions
  width: '100%',
  height: 'auto',
  minHeight: 400,
  maxHeight: 800,

  // Appearance
  theme: 'light', // or 'dark', 'auto'
  borderRadius: 8,
  showBorder: true,

  // Behavior
  autoResize: true,
  scrollToTop: true
});
SurveyMethods.popup({
  surveyId: 'your-survey-id',

  // Trigger options
  trigger: 'button', // 'time', 'exit', 'scroll', 'manual'
  delay: 5000, // for time trigger
  scrollPercent: 50, // for scroll trigger

  // Button (if trigger = 'button')
  buttonText: 'Feedback',
  buttonPosition: 'bottom-right',
  buttonColor: '#007bff',

  // Modal appearance
  modalSize: 'medium', // 'small', 'large', 'fullscreen'
  closeOnOutsideClick: true,
  showCloseButton: true,

  // Animation
  animation: 'fade', // 'slide', 'zoom', 'none'
});

Targeting & Display Rules

SurveyMethods.embed({
  surveyId: 'your-survey-id',

  // Show conditions
  showOnce: true, // Only show once per user
  showOncePerSession: false,
  cookieExpiry: 30, // Days until can show again

  // Page targeting
  urlMatch: '/product/*', // Show on matching pages
  urlExclude: '/checkout', // Don't show on these pages

  // User targeting
  onlyLoggedIn: true,
  onlyNewVisitors: false,

  // Device targeting
  devices: ['desktop', 'tablet', 'mobile']
});

Passing Custom Data

URL Parameters

Pass data via URL:

SurveyMethods.embed({
  surveyId: 'your-survey-id',
  customVariables: {
    userId: '12345',
    plan: 'premium',
    source: 'website'
  }
});

Access in survey as hidden fields or piped text.

Pre-Populate Answers

Pre-fill known information:

SurveyMethods.embed({
  surveyId: 'your-survey-id',
  prefill: {
    'question_id_1': 'John',
    'question_id_2': 'john@example.com',
    'question_id_3': 'Enterprise'
  }
});

User Identification

Track respondent identity:

SurveyMethods.embed({
  surveyId: 'your-survey-id',
  respondent: {
    email: 'user@example.com',
    firstName: 'John',
    lastName: 'Doe',
    customId: 'user_12345'
  }
});

Events & Callbacks

Available Events

SurveyMethods.embed({
  surveyId: 'your-survey-id',

  onReady: function() {
    console.log('Survey loaded');
  },

  onStart: function() {
    console.log('Survey started');
  },

  onPageChange: function(page) {
    console.log('Moved to page', page);
  },

  onComplete: function(response) {
    console.log('Survey completed', response);
    // Redirect, show message, etc.
  },

  onClose: function() {
    console.log('Survey closed');
  },

  onError: function(error) {
    console.error('Survey error', error);
  }
});

Post-Completion Actions

onComplete: function(response) {
  // Show thank you message
  document.getElementById('survey-container').innerHTML =
    '<div class="thank-you">Thanks for your feedback!</div>';

  // Track in analytics
  gtag('event', 'survey_complete', {
    'survey_id': response.surveyId,
    'response_id': response.responseId
  });

  // Redirect
  setTimeout(() => {
    window.location.href = '/thank-you';
  }, 2000);
}

Styling & Customization

CSS Customization

Override default styles:

/* Container */
.sm-embed-container {
  font-family: 'Your Font', sans-serif;
}

/* Questions */
.sm-question-title {
  color: #333;
  font-size: 18px;
}

/* Buttons */
.sm-button-primary {
  background: #007bff;
  border-radius: 4px;
}

/* Progress bar */
.sm-progress-bar {
  background: #e9ecef;
}

.sm-progress-fill {
  background: #007bff;
}

Responsive Design

Embeds are responsive by default, but you can customize:

/* Mobile adjustments */
@media (max-width: 768px) {
  .sm-embed-container {
    padding: 10px;
  }

  .sm-question-title {
    font-size: 16px;
  }
}

Platform-Specific Guides

WordPress

Using shortcode:

[surveymethods id="your-survey-id"]

Using plugin:

  1. Install SurveyMethods plugin
  2. Add survey widget
  3. Configure display settings

React

import { useEffect } from 'react';

function SurveyEmbed({ surveyId }) {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://embed.surveymethods.com/v1/embed.js';
    script.onload = () => {
      window.SurveyMethods.embed({
        surveyId,
        container: '#survey-container'
      });
    };
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, [surveyId]);

  return <div id="survey-container" />;
}

Vue.js

<template>
  <div id="survey-container"></div>
</template>

<script>
export default {
  props: ['surveyId'],
  mounted() {
    const script = document.createElement('script');
    script.src = 'https://embed.surveymethods.com/v1/embed.js';
    script.onload = () => {
      window.SurveyMethods.embed({
        surveyId: this.surveyId,
        container: '#survey-container'
      });
    };
    document.body.appendChild(script);
  }
}
</script>

Shopify

  1. Go to Online Store > Themes > Edit Code
  2. Add to theme.liquid or specific template:
{% if template == 'product' %}
<div id="survey-container"></div>
<script src="https://embed.surveymethods.com/v1/embed.js"></script>
<script>
  SurveyMethods.embed({
    surveyId: 'your-survey-id',
    container: '#survey-container',
    customVariables: {
      productId: '{{ product.id }}',
      productTitle: '{{ product.title }}'
    }
  });
</script>
{% endif %}

Common Use Cases

Exit-Intent Survey

Capture feedback before visitors leave:

SurveyMethods.popup({
  surveyId: 'exit-survey-id',
  trigger: 'exit',
  modalSize: 'small',
  title: 'Quick question before you go',
  showOnce: true
});

Post-Purchase Feedback

Survey after checkout:

SurveyMethods.embed({
  surveyId: 'purchase-survey-id',
  container: '#post-purchase',
  customVariables: {
    orderId: orderData.id,
    orderTotal: orderData.total
  },
  prefill: {
    'email_field': orderData.email
  }
});

In-App NPS

Measure user satisfaction in your app:

SurveyMethods.slideIn({
  surveyId: 'nps-survey-id',
  position: 'bottom-right',
  trigger: {
    type: 'manual'
  }
});

// Show after specific action
document.getElementById('complete-action').onclick = () => {
  SurveyMethods.show();
};

Best Practices

Performance

  • Load script asynchronously
  • Lazy load off-screen surveys
  • Use appropriate embed size
  • Minimize custom CSS

User Experience

  • Don’t interrupt critical flows
  • Use appropriate timing
  • Allow easy dismissal
  • Mobile-optimize

Targeting

  • Show to relevant users
  • Limit frequency
  • Test different triggers
  • A/B test placement

Troubleshooting

Survey Not Loading

  • Verify survey ID is correct
  • Check survey is active
  • Ensure collector is enabled
  • Check for JavaScript errors
  • Verify domain is allowed

Styling Issues

  • Check CSS specificity
  • Clear browser cache
  • Inspect element styles
  • Test without custom CSS

Not Tracking Properly

  • Verify custom variables
  • Check respondent identification
  • Review cookie settings
  • Test in incognito mode

Related articles:

Was this article helpful?

Related Articles

View all in Distribution →

Need more help?

Contact our support team for personalized assistance.

Contact Support →