Code Pen Editor

CodePen Integration Plugin for Bubble

Muhammad Tayyab

Last Update hace 2 años

Description

Effortlessly bring the power of CodePen directly into your Bubble applications with our CodePen Editor Plugin! This plugin allows you to seamlessly embed any CodePen project within your Bubble app, providing a fully interactive and customizable environment. Make live changes to the HTML, CSS, and JavaScript code directly from Bubble, and instantly see the results update in real-time.

Demo Page: https://chakor-plugin-demo-3.bubbleapps.io/version-test/code_pen?debug_mode=true


Editor Page: https://bubble.io/page?id=chakor-plugin-demo-3&test_plugin=1732285567127x697038547353337900_current&tab=Design&name=code_pen&type=page

Key Features

  • Easy Embedding: Simply input the code-pen username and Pen ID to embed any CodePen project into your Bubble app.
  • Live Code Editing: Edit HTML, CSS, and JavaScript directly from within Bubble, using an intuitive code editor.
  • Real-Time Preview: Instantly view changes as you make them, with live updates reflecting directly in the embedded CodePen.
  • Customizable Display: Adjust the size, layout, of the embedded CodePen to fit seamlessly within your Bubble design.

How to Embed Code Pen - Plugin Setup

1. Add the CodePen Element:
  • Drag the "Code pen" element from the editor panel into your Bubble page.
2. Fill Out the Required Fields:
  • Username: Enter the CodePen username associated with the project you want to embed. This should be the profile name where the Pen is hosted.
  • Pen ID: Enter the unique ID of the Pen you want to embed. The Pen ID can be found in the URL of the CodePen (e.g., if the URL is https://codepen.io/username/pen/abc123, the Pen ID is abc123).
3.Set the Element Height (Optional):
  • Height: You can specify the height of the embedded CodePen in pixels. If left blank, the plugin will use a default height of 300px.
Our team is available to solve any problems or questions you may have, please open a thread on our support forum: https://forum.thechakor.com/t/plugin-issues

Was this article helpful?

0 out of 0 liked this article