Embed My Auction to My Website

Overview of Auction Embedding

Embedding your CharityAuctionsToday auction into your organization's website allows visitors to browse items, place bids, and participate in your fundraising event without leaving your site. This seamless integration maintains your brand identity, keeps donors engaged with your content, increases auction visibility, and provides a professional, cohesive experience that can boost participation and fundraising results.

Why Embed Your Auction

Benefits of Website Integration

Advantages of embedding versus external links:

Seamless User Experience:

• Visitors stay on your website
• No jarring redirect to external platform
• Consistent branding and design
• Familiar navigation and layout
• Professional presentation

Increased Engagement:

• Lower barrier to participation
• Easier item browsing
• Reduced friction in bidding process
• Higher conversion rates
• Better user retention

Brand Consistency:

• Maintain your visual identity
• Custom colors and styling
• Your logo and messaging
• Integrated with other content
• Cohesive donor experience

Better Visibility:

• Auction featured on homepage
• Integrated with blog posts
• Easy navigation from other pages
• Central location for supporters
• Enhanced discoverability

SEO Benefits:

• Content on your domain
• Improved site engagement metrics
• Longer session durations
• Lower bounce rates
• Better search rankings

Analytics Integration:

• Track with your Google Analytics
• Understand visitor behavior
• Measure conversion funnels
• ROI tracking
• Data-driven improvements

Embedding Options

Types of Embeds Available

Different ways to integrate your auction:

Full Auction Embed:

• Complete auction catalog
• All items and categories
• Full bidding functionality
• Search and filter features
• Registration and checkout
• Most comprehensive option

Item Gallery Widget:

• Featured items display
• Carousel or grid format
• Click to view full details
• Visual showcase
• Links to full auction

Individual Item Embed:

• Single item spotlight
• Detailed item page
• Bid button included
• Great for blog posts
• Promotional purposes

Countdown Timer Widget:

• Auction closing countdown
• Creates urgency
• Eye-catching design
• Links to auction
• Can be placed anywhere

Category Widget:

• Specific category display
• Example: "Travel Packages"
• Filtered view
• Targeted promotion
• Category-specific pages

Bidding Activity Feed:

• Live bid updates
• Recent activity display
• Creates excitement
• Social proof
• Real-time engagement

How to Embed Your Auction

Step-by-Step Embedding Process

Step 1: Access Embed Settings

1. Log into CharityAuctionsToday dashboard
2. Select your auction event
3. Navigate to "Settings" or "Auction Settings"
4. Click "Embed," "Website Integration," or "Widgets"
5. View embedding options

Step 2: Choose Embed Type

Select the integration that fits your needs:

Full Auction Embed:

• Best for: Dedicated auction page
• Size: Full width or customizable
• Features: Complete functionality
• Click "Full Auction Embed"

Item Gallery:

• Best for: Homepage feature
• Size: Flexible dimensions
• Features: Visual showcase
• Click "Item Gallery Widget"

Single Item:

• Best for: Blog posts, promotional pages
• Size: Compact or expanded
• Features: Individual item focus
• Click "Single Item Embed"

Step 3: Customize Embed Settings

Configure appearance and behavior:

Dimensions:

• Width: Pixels or percentage (e.g., 100%)
• Height: Fixed pixels or auto-adjust
• Responsive design option
• Mobile optimization
• Preview different sizes

Display Options:

• Show/hide categories
• Number of items displayed
• Grid vs. list view
• Search bar visibility
• Filter options included

Styling:

• Color scheme (if customizable)
• Font selections
• Button styles
• Match your brand
• CSS customization options

Behavior:

• Open in iframe or new window
• Scrolling enabled/disabled
• Auto-height adjustment
• Interactive features
• Bidding functionality

Step 4: Copy Embed Code

Get the integration code:

1. Click "Generate Code" or "Get Embed Code"
2. Embed code appears in text box
3. Click "Copy to Clipboard" or manually select all
4. Code copied and ready to use

Sample Embed Code:

html

<iframe 
  src="https://charityauctionstoday.com/embed/your-auction-id" 
  width="100%" 
  height="800" 
  frameborder="0" 
  scrolling="auto"
  title="Charity Auction">
</iframe>

Step 5: Access Your Website Editor

Where to add the code depends on your platform:

WordPress:

1. Log into WordPress admin
2. Edit page where auction will appear
3. Switch to "HTML" or "Code" view
4. Or use Custom HTML block

Wix:

1. Open Wix editor
2. Click "+" to add element
3. Select "Embed Code"
4. Paste code in HTML iframe option

Squarespace:

1. Edit page in Squarespace
2. Add "Code" block
3. Paste embed code
4. Save changes

HTML/Custom Sites:

1. Open HTML file or CMS
2. Navigate to desired location
3. Paste code where auction should appear
4. Save and upload if needed

Step 6: Paste Embed Code

Insert the code into your website:

1. Locate insertion point in HTML
2. Paste complete embed code
3. Don't modify code structure
4. Ensure no characters missing
5. Proper placement within page structure

Common Placement Locations:

• Dedicated auction page
• Homepage featured section
• Sidebar widget area
• Blog post content
• Event information page

Step 7: Adjust Sizing (if needed)

Fine-tune dimensions:

Responsive Sizing:

html

<div style="position: relative; padding-bottom: 75%; height: 0;">
  <iframe 
    src="..." 
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0">
  </iframe>
</div>

Fixed Sizing:

html

<iframe 
  src="..." 
  width="800" 
  height="600"
  frameborder="0">
</iframe>

Full Width:

html

<iframe 
  src="..." 
  width="100%" 
  height="800"
  frameborder="0">
</iframe>

Step 8: Preview and Test

Verify everything works:

1. Save/publish page changes
2. View page in browser
3. Check auction loads properly
4. Test on desktop
5. Test on mobile devices
6. Try different browsers
7. Verify bidding functionality
8. Check links work correctly

Step 9: Optimize and Publish

Final adjustments:

• Adjust height if content cut off
• Verify mobile responsiveness
• Check load time acceptable
• Ensure proper scrolling behavior
• Make final styling tweaks
• Publish live to website

Platform-Specific Instructions

WordPress Integration

Detailed WordPress embedding:

Method 1: Custom HTML Block

1. Edit page/post in Block Editor (Gutenberg)
2. Click "+" to add block
3. Search for "Custom HTML"
4. Paste embed code
5. Preview and publish

Method 2: Classic Editor

1. Edit page in Classic Editor
2. Switch to "Text" tab (not Visual)
3. Paste embed code
4. Switch back to Visual to verify
5. Update/publish page

Method 3: Widget Area

1. Go to Appearance > Widgets
2. Add "Custom HTML" widget to sidebar
3. Paste embed code
4. Save widget
5. View on frontend

WordPress Plugins:

• Some themes have embed options
• Page builders (Elementor, Divi) support iframes
• Custom HTML elements available
• Shortcode options possible

Troubleshooting WordPress:

• Switch to HTML/Text view
• Disable visual editor temporarily
• Check theme doesn't strip iframes
• Verify user permissions
• Test in different page builders

Wix Integration

Embedding in Wix:

Step-by-Step:

1. Open Wix Editor
2. Click "+" button to add element
3. Select "Embed" section
4. Choose "HTML iframe"
5. Click "Enter Code"
6. Paste embed code
7. Set "What does this code do?" to "Display Content"
8. Click "Update"
9. Resize and position
10. Publish site

Wix Considerations:

• May need to adjust sizing
• Preview on mobile
• Some Wix plans required for embeds
• Free plans may have restrictions
• Check iframe support in your plan

Squarespace Integration

Embedding in Squarespace:

Step-by-Step:

1. Edit page in Squarespace
2. Click where you want auction
3. Click "+" to add block
4. Select "Code" block
5. Paste embed code
6. Set to "HTML" (not Markdown)
7. Save block
8. Preview page
9. Publish changes

Squarespace Tips:

• Use Code block, not Embed block
• Ensure HTML mode selected
• Adjust block spacing
• Test responsive behavior
• May need to adjust page width

Shopify Integration

Embedding in Shopify:

Step-by-Step:

1. Go to Online Store > Pages
2. Edit or create page
3. Click "Show HTML" button
4. Paste embed code
5. Position in page content
6. Save page
7. Preview on storefront

Shopify Considerations:

• Works in page content
• May conflict with theme styles
• Test in different themes
• Check mobile responsiveness
• Verify on different devices

Custom HTML Sites

Direct HTML integration:

Basic Implementation:

html

<!DOCTYPE html>
<html>
<head>
  <title>Our Charity Auction</title>
</head>
<body>
  <h1>Annual Fundraising Auction</h1>
  
  <div class="auction-container">
    <iframe 
      src="https://charityauctionstoday.com/embed/your-auction-id" 
      width="100%" 
      height="800" 
      frameborder="0"
      allowfullscreen>
    </iframe>
  </div>
  
</body>
</html>

Responsive Container:

html

<div style="max-width: 1200px; margin: 0 auto;">
  <iframe 
    src="..." 
    style="width: 100%; height: 800px; border: none;">
  </iframe>
</div>

Customization Options

Styling Your Embed

Make the embed match your brand:

CSS Customization:

html

<style>
  .auction-embed {
    border: 2px solid #333;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    overflow: hidden;
  }
</style>

<div class="auction-embed">
  <iframe src="..." width="100%" height="800"></iframe>
</div>

Background Integration:

html

<div style="background-color: #f5f5f5; padding: 20px;">
  <h2>Our Charity Auction</h2>
  <p>Browse and bid on amazing items!</p>
  <iframe src="..." width="100%" height="800"></iframe>
</div>

Header and Footer:

html

<div class="auction-section">
  <div class="auction-header">
    <h1>Spring Fundraising Gala</h1>
    <p>Bidding closes Sunday at 8 PM</p>
  </div>
  
  <iframe src="..." width="100%" height="800"></iframe>
  
  <div class="auction-footer">
    <p>Questions? Contact us at auction@yourorg.org</p>
  </div>
</div>

Advanced Features

Enhanced embedding options:

Dynamic Height Adjustment:

javascript

<script>
  window.addEventListener('message', function(e) {
    if (e.data.hasOwnProperty('frameHeight')) {
      document.getElementById('auction-iframe').style.height = e.data.frameHeight + 'px';
    }
  });
</script>

<iframe 
  id="auction-iframe"
  src="..." 
  width="100%"
  scrolling="no">
</iframe>

Loading Indicator:

html

<div id="auction-container">
  <div id="loading">Loading auction...</div>
  <iframe 
    src="..." 
    width="100%" 
    height="800"
    onload="document.getElementById('loading').style.display='none'">
  </iframe>
</div>

Fallback Content:

html

<iframe src="..." width="100%" height="800">
  <p>Your browser doesn't support iframes. 
     <a href="https://charityauctionstoday.com/your-auction">
       View the auction here
     </a>
  </p>
</iframe>

Troubleshooting Embed Issues

Common Problems and Solutions

Problem: Auction Not Displaying

Possible Causes:

• Incorrect embed code
• Code modified accidentally
• Auction not published
• Website blocks iframes
• Security restrictions

Solutions:

1. Re-copy embed code from source
2. Verify code pasted completely
3. Check auction is live/published
4. Test in different page/location
5. Check website security settings
6. Contact web host about iframe support

Problem: Cut-Off Content

Possible Causes:

• Height set too small
• Fixed height doesn't fit content
• Responsive settings incorrect
• Theme CSS conflicts

Solutions:

1. Increase height value
2. Use height="auto" if supported
3. Set min-height instead
4. Adjust responsive wrapper
5. Remove fixed heights
6. Test on different screen sizes

Problem: Not Mobile Responsive

Possible Causes:

• Fixed width in pixels
• Responsive wrapper missing
• Theme doesn't support responsive iframes
• Mobile breakpoints not set

Solutions:

1. Change width to 100% or percentage
2. Add responsive container wrapper
3. Use mobile-friendly theme
4. Add viewport meta tag
5. Test on actual mobile devices
6. Adjust CSS media queries

Problem: Scrolling Issues

Possible Causes:

• Double scrollbars appearing
• Can't scroll within iframe
• Page jumps when scrolling
• Height adjustment needed

Solutions:

1. Set scrolling="no" or "auto"
2. Adjust iframe height
3. Remove fixed positioning
4. Check theme CSS
5. Test different scrolling values

Problem: Slow Loading

Possible Causes:

• Large auction with many items
• Slow website hosting
• Internet connection issues
• Multiple embeds on same page

Solutions:

1. Add loading indicator
2. Optimize page performance
3. Consider lazy loading
4. Limit embeds per page
5. Upgrade hosting if needed

Best Practices

Embedding Strategy

Optimal implementation approach:

Choose Right Location:

• Prominent page position
• Easy to find in navigation
• Relevant context
• Logical user flow
• High-traffic pages

Provide Context:

• Introductory text above embed
• Explain auction purpose
• Highlight featured items
• Set expectations
• Include call-to-action

Maintain Branding:

• Consistent colors and fonts
• Your logo visible
• Branded headers/footers
• Professional presentation
• Cohesive design

Optimize Performance:

• Don't embed on every page
• One embed per page typically
• Fast hosting
• Optimized images
• Quick load times

Test Thoroughly:

• Multiple browsers (Chrome, Firefox, Safari, Edge)
• Various devices (desktop, tablet, mobile)
• Different screen sizes
• Internet speeds
• User experience flow

SEO Considerations

Search engine optimization:

Page Content:

• Include auction description text
• Add keywords naturally
• Don't rely only on embedded content
• Provide meta descriptions
• Use heading tags properly

Alt Text and Titles:

• Add title attribute to iframe
• Provide context for screen readers
• Accessibility compliance
• Descriptive page titles

Internal Linking:

• Link to auction from multiple pages
• Navigation menu inclusion
• Blog post links
• Email campaign links
• Social media promotion

Performance:

• Fast page load crucial for SEO
• Monitor Core Web Vitals
• Optimize embedding code
• Minimize page weight
• Regular performance audits

Marketing Your Embedded Auction

Driving Traffic to Your Website

Promote the embedded auction:

Email Campaigns:

• Link directly to auction page
• "Browse items on our website"
• Visual email with item previews
• Clear call-to-action buttons
• Multiple campaign touches

Social Media:

• Share website auction page link
• Post featured items with website links
• Facebook event with website in description
• Instagram bio link
• LinkedIn posts for professional audience

Traditional Marketing:

• Include website URL on printed materials
• QR codes to auction page
• Event programs
• Newsletters
• Press releases

On-Site Promotion:

• Homepage banner
• Sidebar widgets
• Blog post announcements
• Pop-ups (use sparingly)
• Newsletter signup forms

Security and Privacy

Protecting Your Website and Visitors

Important security considerations:

Secure Connections:

• Ensure your site uses HTTPS
• CharityAuctionsToday uses HTTPS
• Secure payment processing
• Encrypted data transmission
• SSL certificates current

Content Security Policy:

• May need to allow CharityAuctionsToday domain
• Configure CSP headers if restricted
• iframe-src directive
• Allow secure embedding
• Consult developer if needed

Privacy Compliance:

• GDPR considerations
• CCPA compliance
• Cookie consent
• Privacy policy updated
• Terms of service clear

User Data:

• CharityAuctionsToday handles data securely
• No sensitive data exposed
• Bidder information protected
• PCI compliant processing
• Transparent data practices

Conclusion

Embedding your CharityAuctionsToday auction directly into your organization's website creates a seamless, professional experience that keeps donors engaged with your brand while providing full auction functionality. By following the simple process of copying the provided embed code and pasting it into your website's HTML editor, you can integrate your auction in minutes, regardless of your website platform.

The embedded auction maintains complete bidding capabilities while visitors remain on your site, increasing participation rates, improving brand consistency, enhancing donor experience, and providing better analytics about auction engagement. Whether you choose a full auction embed, item gallery widget, or single item showcase, the integration is flexible and customizable to match your website design and marketing strategy.

Test your embed thoroughly across devices and browsers, provide context and promotional content around the embedded auction, and actively market your website's auction page through email, social media, and traditional channels. With a well-integrated embedded auction, you'll create a powerful fundraising tool that leverages your existing website traffic and strengthens your organization's digital presence while maximizing auction visibility and participation for greater fundraising success.

Tom Kelly

Tom Kelly, TEDx speaker and CEO of CharityAuctions.com, helps nonprofits raise millions through auctions and AI. He hosts The Million Dollar Nonprofit podcast and inspires leaders to live their legacy, not just leave it.