Basic Embeds

Basic Embeds: Use these to get started on your Embed journey

Basic Embeds lets you add a functional IDE into your platform (your website, applications, LMS, or course materials) with limited customization options.To use basic Embeds, you need a JDoodle account. With a free JDoodle account, you can create unlimited basic Embeds. Here’s how a Basic embed looks live:

Creating a Basic Embed

You can create a basic Embed in three simple steps. From your profile, go to Embeds and click on Create an Embed button nested under the Embed manager.

Setup

This is the first step to creating your Embed. Before proceeding, you need to fill out a few details. Please note that all the fields are required to be filled to create an Embed.

Embed and description name : Give your embed a name and description. The name can have any letters, numbers, or symbols. You need to give at least one character to move forward. (It is not displayed to your users.)
Embed type : Select between basic, premium, and ultra Embeds. Since we’re creating a basic Embed now, we’ll select basic.
Select language : Add the programming language for your Embed. This documentation provides information about the languages and versions supported by our Embeds. You can only add one language to basic Embeds. To add multiple languages, you must create a premium Embed.
Select version : Select a version for the programming language you’re adding. The version you select will be the default selected version. All the available language versions will be displayed in the Embed, and your users can select any version they prefer.
Add language : After selecting the language and version, click the add language button to dd the language.
Selected language(s) : This area will show the language you’ve added for your Embed.

Configure

In this area, you can see how your basic Embeds look and try it out by executing a code snippet. You can also:

Change the font size
Change the language version
Toggle between mobile, tablet, and desktop view.

Please note that the way your Embed IDE looks here is how it will appear to your users. For more customization options (like color, fonts, etc.), you can create a premium Embed.

Download

This is the last step of creating your basic Embed. You can copy and add the code to your platform here.You will notice that the functional features are unavailable for basic Embeds. To access functional features, you must create a premium Embed. You can refer to this documentation to learn more.Here’s a basic Embed code that you can try in our advanced HTML/CSS/JavaScript IDE.

<body>

<div data-pym-src="https://www.jdoodle.com/embed/v1/6ba97fd66069ade7"></div>

<script src="https://www.jdoodle.com/assets/jdoodle-pym.min.js" type="text/javascript"> </script>

</body>

Customization options in Basic Embeds

The customization options are very limited in basic Embeds. You can only add and change language.

Adding a Basic Embed to your platform

You can add a basic Embed to your platform in any location using an HTML editor. To try out how Basic Embed looks, copy and paste the code snippet to any HTML/CSS IDE and see how it looks for your users. To try out the basic Embed in our advanced HTML/CSS/JavaScript IDE, copy the Embed code, or you can also use the Embed code below:

    <body>
        <div data-pym-src="https://www.jdoodle.com/embed/v1/6ba97fd66069ade7"></div>
        <script src="https://www.jdoodle.com/assets/jdoodle-pym.min.js" type="text/javascript"> </script>
    </body>

After pasting the code in the code editor, click the execute button. Your basic Embed IDE is shown in the output box. You can add any code snippet, execute it, toggle between interactive and non-interactive modes, change the font, add STDIN, and input arguments.

Need more assistance?

Please fill out our contact form or post your question in the JDoodle community for further support.

Previous Topic ← Supported languages & versions

Next Topic Embed FAQ →