Logo

Premium Embeds

A comprehensive look at how to become a premium embed user

Premium Embeds lets you add a highly customizable and secure IDE with multiple programming languages to your platform.You need a paid JDoodle account to use premium Embeds.

  • With a JDoodle Pro plan, you can get 5 premium Embeds.
  • With a JDoodle Teacher plan, you can get 10 premium Embeds.
  • Contact us if you or your team need more premium Embeds or customizations.

Here’s how a Premium Embed looks live:

How to create a premium Embed?

Here are the steps to create a premium Embed.

Setup

This is the first step to creating your premium Embed. Before proceeding, you need to fill out a few details. Please note that all the fields must be filled out to create an Embed.The fields here are similar to those used when creating a Basic Embed, except you can add multiple programming languages in a Premium Embed.

Configure

In this area, you can customize and see how your premium Embed will look and try it out by executing a code snippet. You can also:

  • Customize it using HTML components like tabs, sections, flex, text, etc., and you can add unlimited HTML components.
  • Customize it using JDoodle components, such as external libraries, input and output files, code editor font size, etc. You can add only one JDoodle component or choose to remove it.
  • Set the default code, version, and editor theme for each language you’ve added.
  • Delete components and edit styling for all components for font, color, size, etc.

Download

This is the last step of creating your premium Embed. You can copy and add the code to your platform here.Premium has some functional features, like Embed to Host and Host to Embed settings. You can tick the ones you want for your platform and get the Embed code.To learn more about the functional features of Embeds, refer to this documentation.Here’s what a premium Embed code looks like without functional features:

<body>

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

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

</body>

Here’s how a premium Embed with a few functional features looks like:

<body>

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

<input id="languageVersion" type="number" value="0">

<button onclick="setVersion()">Set Version</button>

<button onclick="clearCodeEditor()">Clear Code Editor</button>

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

<script>

function setVersion() {

const version = document.getElementById('languageVersion').value

pym.autoInitInstances[0].sendMessage('setVersion', version)

</script>

<script>

function clearCodeEditor() {

pym.autoInitInstances[0].sendMessage('clearCodeEditor')

}

</script>

</body>

These code snippets are for example purposes only and you can only try them in our advanced HTML/CSS/JavaScript IDE.

How to add a premium Embed to your website?

To add a premium Embed, ensure your domain is added to the domain manager on the Embed page. Our premium Embeds are highly secure, so nobody can use them. The Embeds you create are only usable in the domains you allow. Next, add the premium Embed code to your platform’s HTML editor. Try this premium Embed code in our HTML/CSS/JavaScript IDE to see how it would look on your platform. Here’s what premium Embed code looks like without functional features:

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

Didn’t find what you were looking for?

You can post your queries in the JDoodle community or raise a request by filling out this form.

Previous Topic ← Host-Embed communication
Next Topic Ultra Embeds →