Skip to Content
GuidesCodePen Integration

🎨 CodePen Integration Guide

This guide explains how to embed CodePen examples in your GoCharting SDK documentation.

🚀 Quick Start

For documentation systems that support HTML iframes:

<iframe height="600" style="width: 100%; border: 1px solid #e1e5e9; border-radius: 8px;" 
  scrolling="no" title="GoCharting SDK - Advanced Trading Demo" 
  src="https://codepen.io/Admin-GoCharting/embed/xbwvBbe?default-tab=result&theme-id=dark&editable=true"
  frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  <p>See the Pen <a href="https://codepen.io/Admin-GoCharting/pen/xbwvBbe">GoCharting SDK - Advanced Trading Demo</a> by GoCharting on <a href="https://codepen.io">CodePen</a>.</p>
</iframe>

For platforms that don’t support iframes:

[![Advanced Trading Demo](https://img.shields.io/badge/CodePen-Advanced%20Demo-000000?style=for-the-badge&logo=codepen&logoColor=white)](https://codepen.io/Admin-GoCharting/full/xbwvBbe)
 
[![Preview](https://codepen.io/Admin-GoCharting/pen/xbwvBbe/image/large.png)](https://codepen.io/Admin-GoCharting/full/xbwvBbe)

🛠️ Using the CodePen Component

JavaScript Component

Include the CodePen component in your documentation build:

// Import the component
const { GoChartingCodePens } = require('./docs/components/CodePenEmbed.js');
 
// Generate advanced demo embed
const advancedEmbed = GoChartingCodePens.advanced.generateMarkdown();
 
// Generate basic demo embed  
const basicEmbed = GoChartingCodePens.basic.generateMarkdown();

Custom Embed Creation

const { createCodePenEmbed } = require('./docs/components/CodePenEmbed.js');
 
const customEmbed = createCodePenEmbed('your-pen-id', {
    title: 'Your Custom Demo',
    height: 500,
    theme: 'dark',
    description: 'Description of your demo',
    features: [
        '🎯 Feature 1',
        '📊 Feature 2',
        '🔧 Feature 3'
    ]
});
 
// Generate the embed
const embedHTML = customEmbed.generateComplete();

🎯 CodePen URL Parameters

Customize the embedded CodePen behavior:

ParameterOptionsDescription
default-tabresult, html, css, jsWhich tab to show by default
theme-iddark, lightCodePen theme
editabletrue, falseAllow editing in embed
heightNumber (pixels)Height of the embed

Example URLs

Basic embed:
https://codepen.io/Admin-GoCharting/embed/GgpVepq?default-tab=result

With custom theme:
https://codepen.io/Admin-GoCharting/embed/GgpVepq?default-tab=result&theme-id=dark

Read-only embed:
https://codepen.io/Admin-GoCharting/embed/GgpVepq?default-tab=result&editable=false

📱 Responsive Design

CSS for Responsive Embeds

.codepen-embed {
    width: 100%;
    max-width: 100%;
    margin: 2rem 0;
}
 
.codepen-embed iframe {
    width: 100%;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
}
 
@media (max-width: 768px) {
    .codepen-embed iframe {
        height: 400px;
    }
}

🔧 Build System Integration

For Static Site Generators

Hugo

<!-- layouts/shortcodes/codepen.html -->
<iframe height="{{ .Get "height" | default "500" }}" 
  style="width: 100%; border: 1px solid #e1e5e9; border-radius: 8px;" 
  scrolling="no" 
  title="{{ .Get "title" }}" 
  src="https://codepen.io/{{ .Get "user" | default "Admin-GoCharting" }}/embed/{{ .Get "id" }}?default-tab={{ .Get "tab" | default "result" }}&theme-id={{ .Get "theme" | default "dark" }}"
  frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
</iframe>

Usage:

{{< codepen id="xbwvBbe" title="Advanced Trading Demo" height="600" >}}

Jekyll

<!-- _includes/codepen.html -->
<iframe height="{{ include.height | default: '500' }}" 
  style="width: 100%; border: 1px solid #e1e5e9; border-radius: 8px;" 
  scrolling="no" 
  title="{{ include.title }}" 
  src="https://codepen.io/{{ include.user | default: 'Admin-GoCharting' }}/embed/{{ include.id }}?default-tab={{ include.tab | default: 'result' }}&theme-id={{ include.theme | default: 'dark' }}"
  frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
</iframe>

Usage:

{% include codepen.html id="xbwvBbe" title="Advanced Trading Demo" height="600" %}

For React/Next.js

// components/CodePenEmbed.jsx
import React from 'react';
 
const CodePenEmbed = ({ 
  id, 
  title, 
  height = 500, 
  theme = 'dark', 
  tab = 'result',
  user = 'Admin-GoCharting' 
}) => {
  const src = `https://codepen.io/${user}/embed/${id}?default-tab=${tab}&theme-id=${theme}`;
  
  return (
    <iframe
      height={height}
      style={{ 
        width: '100%', 
        border: '1px solid #e1e5e9', 
        borderRadius: '8px' 
      }}
      scrolling="no"
      title={title}
      src={src}
      frameBorder="no"
      loading="lazy"
      allowTransparency="true"
      allowFullScreen="true"
    />
  );
};
 
export default CodePenEmbed;

Usage:

<CodePenEmbed 
  id="xbwvBbe" 
  title="Advanced Trading Demo" 
  height={600} 
/>

🎨 Styling Guidelines

Consistent Styling

/* Standard embed styling */
.codepen-embed iframe {
    width: 100%;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}
 
.codepen-embed iframe:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
 
/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .codepen-embed iframe {
        border-color: #333;
    }
}

Feature Lists

.codepen-features {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    margin: 1rem 0;
}
 
.codepen-features ul {
    list-style: none;
    padding: 0;
}
 
.codepen-features li::before {
    content: "✓";
    color: #28a745;
    font-weight: bold;
    margin-right: 0.5rem;
}

📊 Analytics and Tracking

Track CodePen Interactions

// Track when users interact with CodePen embeds
document.addEventListener('DOMContentLoaded', function() {
    const codepenIframes = document.querySelectorAll('iframe[src*="codepen.io"]');
    
    codepenIframes.forEach(iframe => {
        iframe.addEventListener('load', function() {
            // Track embed load
            if (typeof gtag !== 'undefined') {
                gtag('event', 'codepen_embed_load', {
                    'pen_id': iframe.src.match(/\/embed\/([^?]+)/)?.[1],
                    'event_category': 'documentation'
                });
            }
        });
    });
});

🔗 Best Practices

1. Consistent Heights

  • Use consistent heights for similar content types
  • Basic demos: 400-500px
  • Advanced demos: 600-700px
  • Mobile: Reduce height by 100-200px

2. Loading Performance

  • Use loading="lazy" for below-the-fold embeds
  • Consider placeholder images for faster perceived loading

3. Accessibility

  • Always include descriptive titles
  • Provide fallback content for screen readers
  • Ensure keyboard navigation works

4. Fallback Strategy

  • Always provide links to full CodePen
  • Include preview images when possible
  • Use badges for platforms without iframe support

🆘 Troubleshooting

Common Issues

Embed not loading:

  • Check if the pen ID is correct
  • Verify the pen is public
  • Ensure iframe is allowed on your domain

Styling issues:

  • Include the CSS file: codepen-embeds.css
  • Check for conflicting CSS rules
  • Verify responsive breakpoints

Performance issues:

  • Use lazy loading for multiple embeds
  • Consider using preview images
  • Implement intersection observer for loading

📚 Related Documentation

This guide is updated regularly. Last updated: September 2025

Last updated on
Auto-fit & ResponsiveLayout Change Events