Embed Test Page

This page helps verify that chart embeds work correctly across different content management systems and platforms.

Test Chart

Here's a sample chart embed that should work across all platforms:

Platform Compatibility

✅ WordPress

• HTML Block: Copy the iframe code below into an HTML block
• Gutenberg: Works in HTML blocks, not in visual editor
• Classic Editor: Switch to HTML view and paste
• Scripts: WordPress strips scripts by default - our iframe-only approach works perfectly

✅ Ghost

• HTML Card: Use the HTML card and paste the iframe code
• Code Injection: Works in post HTML
• Scripts: Ghost allows iframes but strips scripts - our approach is ideal

✅ Substack

• HTML: Paste in HTML mode (not rich text)
• Scripts: Substack strips JavaScript - iframe-only works
• Note: May need to use the responsive version for mobile

✅ Medium

• Embed: Medium has limited iframe support
• Workaround: Use the responsive version with aspect-ratio
• Scripts: Not supported - iframe-only approach required

✅ Notion

• Embed Block: Use "Embed" block and paste the iframe code
• Scripts: Not supported - iframe-only approach works
• Mobile: Responsive version recommended

✅ Squarespace

• Code Block: Use Code Block and paste iframe
• Scripts: Limited support - iframe-only approach works

Copy-Paste Test Areas

Standard Embed (Fixed Height)

Copy this code for a fixed-height embed:

<iframe
  src="https://dealcharts.org/embed/capitalmarkets/abs/cmbs/gsms2018-gs10/geo-state-all/"
  title="Geographic Distribution - GSMS 2018-GS10 - All States"
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
  sandbox="allow-same-origin allow-scripts allow-popups allow-popups-to-escape-sandbox"
  style="border:0; width:100%; max-width:600px; height:400px; margin:0 auto; display:block;"
></iframe>
<p style="margin:8px 0; font-size:14px; color:#666; text-align:center;">
  Geographic Distribution - GSMS 2018-GS10 - All States
  <a href="https://dealcharts.org/capitalmarkets/abs/cmbs/gsms2018-gs10/geo-state-all/?utm_source=embed&utm_medium=referral&utm_campaign=dealcharts-embed" target="_blank" rel="noopener noreferrer" style="color:#1a73e8; text-decoration:none;">View on Dealcharts</a>
</p>

Responsive Embed (Aspect Ratio)

Copy this code for a responsive embed that maintains aspect ratio:

<iframe
  src="https://dealcharts.org/embed/capitalmarkets/abs/cmbs/gsms2018-gs10/geo-state-all/"
  title="Geographic Distribution - GSMS 2018-GS10 - All States"
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
  sandbox="allow-same-origin allow-scripts allow-popups allow-popups-to-escape-sandbox"
  style="width:100%; max-width:600px; aspect-ratio: 16 / 9; height:auto; border:0; display:block; margin:0 auto;"
></iframe>
<p style="margin:8px 0; font-size:14px; color:#666; text-align:center;">
  Geographic Distribution - GSMS 2018-GS10 - All States
  <a href="https://dealcharts.org/capitalmarkets/abs/cmbs/gsms2018-gs10/geo-state-all/?utm_source=embed&utm_medium=referral&utm_campaign=dealcharts-embed" target="_blank" rel="noopener noreferrer" style="color:#1a73e8; text-decoration:none;">View on Dealcharts</a>
</p>

Platform-Specific Notes

WordPress

• Gutenberg: Use HTML block, not embed block
• Classic Editor: Switch to HTML view
• Security: WordPress strips scripts by default - our iframe approach is perfect
• Mobile: Responsive version recommended for mobile themes

Ghost

• HTML Card: Best option for embedding
• Scripts: Ghost strips JavaScript - iframe-only works perfectly
• Styling: May need to adjust max-width for theme compatibility

Substack

• HTML Mode: Must use HTML mode, not rich text
• Scripts: Not supported - iframe-only approach required
• Mobile: Responsive version works better on mobile

Medium

• Limited Support: Medium has restricted iframe support
• Workaround: Use responsive version with aspect-ratio
• Scripts: Not supported - iframe-only approach required

Notion

• Embed Block: Use "Embed" block type
• Scripts: Not supported - iframe-only approach works
• Mobile: Responsive version recommended

Testing Checklist

• Iframe loads without errors
• Chart image displays correctly
• "View on Dealcharts" link works
• UTM parameters are preserved in link
• Responsive version maintains aspect ratio
• No JavaScript errors in console
• Works on mobile devices
• No security warnings from browser

Troubleshooting

Iframe Not Loading

1. Check if the platform allows iframes
2. Verify the URL is correct
3. Try the responsive version
4. Check browser console for errors

Styling Issues

1. Try the responsive version with aspect-ratio
2. Adjust max-width for your theme
3. Check if your platform strips inline styles

Mobile Issues

1. Use the responsive version
2. Check if your platform has mobile-specific restrictions
3. Test on actual mobile devices

Support

If you encounter issues with embedding charts, please:

1. Check this test page first
2. Try both standard and responsive versions
3. Test in your specific platform's HTML mode
4. Contact support with your platform and any error messages