Azure Cloud Shell - Embedding Cloud Shell in your Websites

@20aman    Oct 16, 2017

Embedding Azure Cloud Shell in your websites gives your visitors an option to directly interact with Azure, without even leaving your website. Your website may be talking about a code sample that your visitor may want to try in Azure. Instead of opening a new instance of Azure Portal, the visitors can try the command right from your site if you have embedded the cloud shell in your website.

All you need is the embed code and you are all set. Just add this code to your site and then you will be able to launch the cloud shell right from there with just a click of a button.Behind the scene, this is nothing but hyperlinking to the URL: https://shell.azure.com

Embed Code

The embed code is as follows if you are using Markdown

[![Launch Cloud Shell](https://shell.azure.com/images/launchcloudshell.png "Launch Cloud Shell")](https://shell.azure.com)

If you are building a website in HTML then the embed code will look like:

<a style="cursor:pointer" onclick='javascript:window.open("https://shell.azure.com", "_blank", "toolbar=no,scrollbars=yes,resizable=yes,menubar=no,location=no,status=no")'><image src="https://shell.azure.com/images/launchcloudshell.png" /></a>

Code in Action

Clicking on below image will open a popup. It will navigate you to the https://shell.azure.com URL within the popup. You can login to Azure and try any commands. I encourage to inspect the link below and compare with the above embed code.

Choosing Shell Type

The above examples will open the most recently used cloud shell. If you want to encourage visitors to experience a specific cloud shell, then update the URL section above embed code. Update as below by adding the last part to the URLs:

Reference:





Comments powered by Disqus