# Embed Code

> Learn how embed codes let creators add interactive content like videos, forms, and checkout widgets to websites and landing pages.

Canonical URL: https://crevio.co/glossary/embed-code

##  What is an Embed Code?

An embed code is a snippet of HTML or JavaScript that allows you to display content from one platform inside another website or page. Creators use embed codes to add videos, checkout buttons, signup forms, and other interactive elements to their websites, [landing pages](/glossary/landing-page), and [sales pages](/glossary/sales-page).

## How Embed Codes Work

1. **Generate Code**: Copy embed code from the source platform
2. **Paste in Editor**: Add the code to your website or page builder
3. **Content Displays**: The embedded content appears on your page
4. **Stays Updated**: Changes to the source automatically reflect on your page

## Common Embed Types for Creators

### Video Embeds
- YouTube or Vimeo videos
- [Video sales letters](/glossary/video-sales-letter)
- Course preview clips
- Testimonial videos

### Checkout & Payment
- Product purchase buttons
- Checkout forms
- Payment widgets
- Buy now buttons

### Forms & Signups
- [Email list](/glossary/email-list) signup forms
- Survey and quiz embeds
- Contact forms
- [Lead magnet](/glossary/lead-magnet) opt-ins

### Social Proof
- Testimonial carousels
- Review widgets
- Social media feeds
- Live purchase notifications

### Scheduling
- Calendar booking widgets
- Appointment schedulers
- Event registration

### Community
- Chat widgets
- Comment sections
- Social feeds
- Live stream players

## Embed Code Examples

### iFrame Embed
```html
<iframe src="https://platform.com/content"
        width="100%"
        height="400"
        frameborder="0">
</iframe>
```

### Script Embed
```html
<script src="https://platform.com/widget.js"></script>
<div data-widget-id="12345"></div>
```

### Button Embed
```html
<a href="https://checkout.platform.com/product"
   class="buy-button">
   Buy Now - $97
</a>
```

## Best Practices

### Performance
- Only embed what's necessary
- Consider lazy loading for below-fold content
- Test page speed after adding embeds
- Use async script loading when available

### Security
- Only embed from trusted sources
- Use HTTPS sources for embeds
- Be cautious with JavaScript embeds
- Review permissions and data sharing

### Mobile Responsiveness
- Use responsive embed options
- Test on multiple devices
- Set appropriate width/height values
- Use percentage widths when possible

### User Experience
- Ensure embeds load quickly
- Provide fallback content when possible
- Don't overload pages with too many embeds
- Test functionality regularly

## Common Embed Issues

### Display Problems
- Container too small for content
- Mobile responsiveness issues
- Style conflicts with page CSS
- Loading failures

### Functionality Issues
- Cross-origin restrictions (CORS)
- HTTPS mixed content warnings
- JavaScript conflicts
- Pop-up blockers

## Platform-Specific Embeds

Different platforms offer various embed options:
- **Video hosts**: YouTube, Vimeo, Wistia
- **Payments**: Stripe, PayPal, Gumroad
- **Email**: ConvertKit, Mailchimp, Beehiiv
- **Scheduling**: Calendly, TidyCal, SavvyCal
- **Community**: Discord widgets, Circle embeds

## Embed Alternatives

When embeds aren't ideal:
- **Direct links**: Simple URLs to external content
- **Screenshots with links**: Static images linking to live content
- **Native integrations**: Built-in platform connections
- **[Webhooks](/glossary/webhook)**: Behind-the-scenes data sync