index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, shrink-to-fit=no, initial-scale=1">
    <meta name="description" content="Circuit Developer Community - API Examples">
    <meta name="author" content="Roger Urscheler">
    <link rel="shortcut icon" type="image/png" href="images/logo-circuit.png"/>
    <title>Circuit API Examples</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script>
        if (window.location.host == 'circuit.github.io' && window.location.protocol != 'https:') {
          window.location.protocol = 'https:';
        }
    </script>
</head>
<body>

    <div id="wrapper">

        <!-- Sidebar -->
        <div id="sidebar-wrapper"></div>

        <!-- Page Content -->
        <div id="page-content-wrapper">
            <div class="container-fluid">

                <!-- Jumbotron Header -->
                <header class="jumbotron hero-spacer">
                    <h2>Circuit Developer Community</h2>
                    <p>
                        Build amazing real-time apps using Circuit APIs.<br>
                        Extend your site with video conferences, screensharing, or rich text messaging.<br>
                        Create a bot to enhance the Circuit experience by integrating with third party services.
                    </p>
                </header>

                <!-- Getting started -->
                <div class="getting-started">
                    <h2>Getting started</h2>
                    <p>Your application on Circuit in 3 easy steps</p>
                    <h3><span>1. </span>Setup your environment</h3>
                    <ol>
                        <li>
                            Start developing your app in our sandbox environment.<br>
                            If you do not have one yet, <a href="https://yourcircuit.typeform.com/to/d3VDXN" target="_blank">request your sandbox</a>.
                        </li>
                        <li>
                            Go create an app, go to the "Manage Applications" > "Custom Apps" and click "Create".
                        </li>
                        <li>You are ready, launch your editor of choice.<br>
                            Happy coding ;-)</li>
                    </ol>

                    <h3><span>2. </span>Build your application</h3>
                    <ol>
                        <li>
                            Read our <a href="https://github.com/circuit/circuit-sdk#circuit-javascript-and-nodejs-sdk" target="_blank">documentation</a> and browse <a href="https://circuit.github.io/jssdk.html" target="_blank">our code sample application gallery</a> to get you started with our <a href="/jssdk.html">JavaScript SDK</a>, <a href="/nodejs.html">Node.js SDK</a>, <a href="/rest.html">Rest API</a> and the <a href="https://github.com/circuit/circuit-ios-sdk/tree/master/Example" target="_blank">iOS SDK</a>.<br>
                            We have a wide range of applications to help you going with the most common use cases.
                        </li>
                        <li>
                            Check out the documentations for <a href="https://circuitsandbox.net/sdk/" target="_blank">JS & Node.js SDK</a>, <a href="https://circuitsandbox.net/rest/v2/swagger/ui/index.html" target="_blank">REST API</a>.<br>
                        </li>
                        <li>
                            Need some help? Reach out to the community on <a href="https://stackoverflow.com/questions/tagged/circuit-sdk" target="_blank">Stack Overflow</a>
                        </li>
                        <li>
                            Submit improvements, ideas or report issues directly on our project bug trackers (<a href="https://github.com/circuit/circuit-sdk/issues" target="_blank">JS SDK</a>, <a href="https://github.com/circuit/circuit-ios-sdk/issues" target="_blank">iOS SDK</a>)<br>
                            We're happy to hear from you.
                        </li>
                        <li>Once you're done, you can go live</li>
                    </ol>
                    <h3><span>3. </span>Go Live</h3>
                    <ol>
                        <li>
                            Ready for production?<br>
                            Your tenant administrator needs to register your application at "Administration" > "OAuth Apps", then give you the the API credentials.<br>
                            <i>Note that if your administrator does not see this section, the "OAuth Apps" Labs feature needs to be enabled.</i>
                        </li>
                        <li>
                            Host your application on a server with SSL and fill in your production API credentials.<br>
                            You are done!
                        </li>
                        <li>
                            If you feel like it, tell us about your app and make it publicly available.<br>
                            We'll make sure to post about it on our portal our blog.
                        </li>
                    </ol>
                </div>


                <!-- Page Features -->

                <br><br>

                <div class="text-center">

                    <div class="col-md-12 col-sm-6 hero-feature" style="text-align: left">
                        <h2>Circuit Application Sample Gallery</h2>
                    </div>

                    <div class="col-md-2 col-sm-6 hero-feature">
                        <a href="/jssdk">
                            <div class="thumbnail">
                                <img src="/images/js-logo.png" alt="">
                                <div class="caption">
                                    <h3>JavaScript SDK</h3>
                                    <h5>JavaScript client-side library</h5>
                                    <p>Best suited for client-side web application. APIs for messaging, WebRTC incl. screenshare and much more.</p>
                                </div>
                            </div>
                        </a>
                    </div>

                    <div class="col-md-2 col-sm-6 hero-feature">
                        <a href="/nodejs">
                            <div class="thumbnail">
                                <img src="/images/nodejs-logo.png" alt="">
                                <div class="caption">
                                    <h3>node.js SDK</h3>
                                    <h5>node.js JavaScript library</h5>
                                    <p>Best suited for bots or server-side web application. Same JS API as the JS SDK, including events. No WebRTC support.</p>
                                </div>
                            </div>
                        </a>
                    </div>

                    <div class="col-md-2 col-sm-6 hero-feature">
                        <a href="/rest">
                            <div class="thumbnail">
                                <img src="/images/restapi-logo.png" alt="">
                                <div class="caption">
                                    <h3>REST API</h3>
                                    <h5>RESTful API</h5>
                                    <p>Best suited for bots or server-side web application. No WebRTC support.</p>
                                </div>
                            </div>
                        </a>
                    </div>

                    <div class="col-md-2 col-sm-6 hero-feature">
                        <a href="/webcomponents">
                            <div class="thumbnail">
                                <img src="/images/wc.png" alt="">
                                <div class="caption">
                                    <h3>Web Components</h3>
                                    <h5>Standard-based custom elements</h5>
                                    <p>Best suited for enhancing own website with Circuit functionality quickly no or very little coding.</p>
                                </div>
                            </div>
                        </a>
                    </div>


                    <div class="col-md-2 col-sm-6 hero-feature">
                        <a href="/ios">
                            <div class="thumbnail">
                                <img src="/images/ios-logo.png" alt="">
                                <div class="caption">
                                    <h3>iOS SDK</h3>
                                    <h5>via CocoaPods</h5>
                                    <p><br><br><br></p>
                                </div>
                            </div>
                        </a>
                    </div>

                </div>

            </div>
        </div>
        <!-- /#page-content-wrapper -->

    </div>
    <!-- /#wrapper -->

    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
        $(function(){
            $("#sidebar-wrapper").load("/sidebar.html");
        });
    </script>
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
      ga('create', 'UA-67318539-2', 'auto');
      ga('send', 'pageview');
    </script>
</body>

</html>