Embed IDE on your site


Sphere Engine Compilers Widget allows you to run computer programs directly on the website. More precisely, it allows you to integrate the Compiler module of the Sphere Engine service via a component known as the widget, that's ready to be embedded on a website.

Sphere Engine Compilers is a service that allows for remote execution of computer programs. It allows you to send a computer program written in one of many supported programming languages and execute it with the input data that you defined. Detailed information about the Sphere Engine Compilers module can be found in the introduction.

See how it works

Below is an embedded, fully functional and ready-to-use widget.

Try the widget on your website

Embedding the widget on your own website is very easy. Below is a method which will allow you to embed the widget in two simple steps.

First, place the following JavaScript code directly after the <body> tag:

<script>SEC_HTTPS = true;
SEC_BASE = "compilers.widgets.sphere-engine.com"; 
(function(d, s, id){ SEC = window.SEC || (window.SEC = []);
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; 
  js.src = (SEC_HTTPS ? "https" : "http") + "://" + SEC_BASE + "/static/sdk/sdk.js";
  fjs.parentNode.insertBefore(js, fjs);   
}(document, "script", "sphere-engine-compilers-jssdk"));
</script>

Next, place the following HTML code in the place in which you want to display the widget:

<div class="sec-widget" data-widget="9e1e25c224b32a941cccc468d284e148"></div>

Create your own widget

Following the steps below allows you to create and configure the widget and then embed it on your website.

1. Register with Sphere Engine

The registration form is available at sphere-engine.com/signup. After completing the registration form, you will have to activate your account using the link sent in the welcome message.

2. Log in to the system and go to the widget configuration

After a successful login, you will be redirected to the user's panel. Next, go to the widget configuration page (Menu > Compilers > Widgets).

3. Create a new widget

Pressing the Create widget button will immediately create a new widget. A new item will appear in the list of widgets, for example 9e1e25c224b32a941cccc468d284e148.

4. The widget is ready to be integrated

After clicking the name of the new item in the list of widgets (e.g. 9e1e25c224b32a941cccc468d284e148), a page with widget's settings will be displayed.

5. Widget's integration with the website

The process of integrating the widget with the website is identical to the one described in the Try the widget on your website section.

In the Widget integration section you will find a personalized snippet of JavaScript code that should be placed directly after the <body> tag:

<script>SEC_HTTPS = false;
SEC_BASE = "<personalized_link>"; 
(function(d, s, id){ SEC = window.SEC || (window.SEC = []);
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; 
  js.src = (SEC_HTTPS ? "https" : "http") + "://" + SEC_BASE + "/static/sdk/sdk.js";
  fjs.parentNode.insertBefore(js, fjs);   
}(document, "script", "sphere-engine-compilers-jssdk"));
</script>

Next, place the following HTML code in the place in which you want to display the widget:

<div class="sec-widget" data-widget="<personalized_widget_code>"></div>
6. The widget is ready for use

After visiting the site on which the widget has been embedded, the widget will be displayed and ready for use.

What's next?

Further information on integration with the Sphere Engine Compilers Widget is covered in subsequent documents:

Alternative integration method via the RESTful API has been described in: