Not only can we use Sage on the cloud or locally in command line/notebook, it is also possible to bind boxes of sage-input into your website, using SageMathCell.
For tutorials and more details, please see https://sagecell.sagemath.org/
The general idea is simple: bind in the appropriate scipt-elements in your html and you can call a sage-server from your website. In particular, the code-snippet consist of 2 lines:
<script src="https://sagecell.sagemath.org/static/jquery.min.js"></script>
<script src="https://sagecell.sagemath.org/static/embedded_sagecell.js"></script>
As a first example, let us add integers:
How is this realized? Simply by adding the sage-code inside the the appropriate script-class:
<script type="text/x-sage"> Some code ... </script>
Many more complex examples can be found in the interact-wiki. One of them is the following interactive Venn diagram:
One particular property of this setup I dislike is that the user can change the underlying code and possibly crash the server. To solve this, we can add a subclass to the sage-script-class and have provide the user with 2 possible boxes: fixed and editable.
As before, once the appriate classes are properly configured in the html-header, all on has to do is use on the the two classe for the SageCell:
<div class="compute"><script type="text/x-sage"> Your code </script></div>
<div class="readonly compute"><script type="text/x-sage"> More of your code </script></div>
Please feel free to contact me for comments and/or questions.