Embedding Surveys
Embed your survey directly into your website to collect responses without visitors leaving your site.
Embed Options
SurveyReflex provides embed code that you can add to any website.
Getting the Embed Code
- Go to your survey’s Details page
- Find the Embed section
- Copy the embed code
Copy embed code from survey details
Iframe Embed
The standard embed uses an iframe.
Embed Code Format
<iframe src="https://surveyreflex.com/embed/survey/your-survey-slug" width="100%" height="600" frameborder="0" style="border: none;"></iframe>Customizing the Embed
Adjust these attributes:
| Attribute | Description | Example |
|---|---|---|
width | Frame width | 100% or 600px |
height | Frame height | 600 or 800 |
style | CSS styling | border: 1px solid #ccc; |
Example: Full Width
<iframe src="https://surveyreflex.com/embed/survey/your-survey-slug" width="100%" height="700" frameborder="0" style="border: none; max-width: 800px; margin: 0 auto; display: block;"></iframe>Where to Embed
Website Pages
Add to any HTML page:
- Feedback page
- Contact page
- Product page
- Support page
Blog Posts
Embed in content:
- Related articles
- Resource pages
- Announcement posts
Help Centers
Collect feedback on:
- Documentation pages
- FAQ sections
- Support articles
Web Applications
Integrate into your app:
- User onboarding
- Feature feedback
- Exit surveys
Adding to Popular Platforms
WordPress
Option 1: HTML Block
- Edit your page/post
- Add an HTML block
- Paste the embed code
Option 2: Custom HTML Widget
- Go to Appearance → Widgets
- Add Custom HTML widget
- Paste the embed code
Embedding in WordPress
Squarespace
- Edit your page
- Add a Code block
- Paste the embed code
- Save and publish
Wix
- Add an Embed element
- Choose HTML iframe
- Paste the embed code
- Adjust size as needed
Shopify
- Edit your page in the theme editor
- Add a Custom HTML section
- Paste the embed code
- Save changes
Responsive Embedding
Make your embed responsive for mobile:
<div style="position: relative; width: 100%; padding-bottom: 75%;"> <iframe src="https://surveyreflex.com/embed/survey/your-survey-slug" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;" ></iframe></div>This maintains aspect ratio on all screen sizes.
Embed Considerations
Height Recommendations
| Survey Length | Recommended Height |
|---|---|
| Short (1-5 questions) | 500px |
| Medium (6-15 questions) | 700px |
| Long (16+ questions) | 900px |
Scrolling
- If survey is taller than frame, scrolling appears
- Consider taller frame for better experience
- One-at-a-time display works well in embeds
Mobile Responsiveness
- Use
width="100%"for responsive width - Test on mobile devices
- Consider mobile-specific embed sizes
Security & Privacy
HTTPS
- Embed URLs use HTTPS
- Ensure your site also uses HTTPS
- Mixed content warnings may appear otherwise
Cross-Origin
- Embeds work on any domain
- No special configuration needed
- Response data stays secure
Troubleshooting
Embed Not Showing
- Verify the survey is published
- Check the embed URL is correct
- Ensure iframe is allowed on your platform
Sizing Issues
- Adjust width and height attributes
- Use responsive wrapper for mobile
- Check for CSS conflicts
Survey Not Loading
- Confirm survey URL is correct
- Check if survey has expired
- Verify response limit not reached