# Use a Ruleset from Your Software ## Introduction Great to see you're still here. Your first journey with Rulecube is almost at an end. And your last step in this tutorial is using your ruleset via its API from your software. Because, in the end, that's what it's all about: using rulesets from your web application or third-party software. After finishing this tutorial, you'll know how to integrate a ruleset into a web page. ## Use a ruleset from external software This tutorial assumes you're familiar with JavaScript, so feel free to develop your web page solution to integrate the loan application ruleset from the previous tutorial. Or follow along with this tutorial. Either way, we encourage you to add your personal insights to explore the integration possibilities of Rulecube. ### Task: Look up the JavaScript example of a ruleset Rulecube makes your development life as easy as possible and automatically provides a JavaScript example of how to call and consume the API of each ruleset. 1. Open the `LoanApplication` ruleset and click **Docs**.\ ↳ The **Documentation** page opens with the *Summary* tab activated. 2. Explore the **Summary** tab, which gives a quick overview of a ruleset. 3. Click the **Examples** tab.\ ↳ Rulecube shows a `fetch` example for calling the ruleset via its API:
### Task: build a web page that calls and consumes the ruleset > For simplicity, the following HTML file contains both HTML definitions and the corresponding JavaScript code. In real-world applications, you would probably separate the HTML and JavaScript into different files. 1. Create a new HTML file in your favorite code editor named `CallLoanApplication.html`. 2. Enter the following code into the file:
<html>

   <head>
       <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
       <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.slim.min.js"></script>
       <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
       <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
   </head>

   <body>
       <div class="container">
           <h1 class="m-5">Loan Amount Calculator</h1>
           <div class="m-5">
               <form action="javascript:calculateAmount()">
                   <div class="row">
                       <div class="form-group col-6">
                           <label for="applicantname">Applicant name:</label>
                           <input type="text" class="form-control" id="applicantname">
                       </div>
                   </div>
                   <div class="row">
                       <div class="form-group col-3">
                           <label for="dateofbirth">Date of birth:</label>
                           <input type="date" class="form-control" id="dateofbirth">
                       </div>
                   </div>
                   <div class="row">
                       <div class="form-group col-3">
                           <label for="yearlyincome">Yearly income:</label>
                           <input type="number" class="form-control" id="yearlyincome">
                       </div>
                   </div>
                   <button type="submit" class="btn btn-primary">Calculate loan amount</button>
               </form>
               <div class="jumbotron">
                   <h4 class="ml-2 mb-3" id="overviewtitle">Overview</h4>
                   <div class="col-3">
                       <label for="age">Age:</label>
                       <input type="number" class="form-control" id="age" readonly>
                   </div>
                   <div class="col-3">
                       <label for="maxamount">Maximum loan amount:</label>
                       <input type="number" class="form-control" id="maxamount" readonly>
                   </div>
               </div>
           </div>
       </div>

       <script>
           async function calculateAmount() {
               let response = await fetch('<<Your rulecube URL>>/api/execute/ruleset', {
                   method: 'POST',
                   headers: {
                       "Authorization": 'YOUR_API_KEY',
                       "Content-Type": 'application/json'
                   },
                   body: JSON.stringify({
                       "name": "loanapplication",
                       "version": "1.0",
                       "options": {
                           "explain": false
                       },
                       "input": {
                           "LoanApplicant": {
                               "Name": document.getElementById("applicantname").value,
                               "DateOfBirth": document.getElementById("dateofbirth").value,
                               "YearlyIncome": document.getElementById("yearlyincome").value
                           }
                       }
                   })
               })

               if (response.ok) {
                   let result = await response.json();
                   console.log('Result:', result);
                   document.getElementById("overviewtitle").innerHTML = 'Overview for ' + document.getElementById("applicantname").value;
                   document.getElementById("age").setAttribute('value', result.result.LoanApplicant.Age);
                   document.getElementById("maxamount").setAttribute('value', result.result.LoanApplicant.MaximumLoanAmount);
               } else {
                   let error = await response.text();
                   console.error('Error executing:', error);
               }
           }
       </script>
   </body>

   </html>
\ ⇨ Replace `YOUR-API_KEY` with your key. 3. Replace <\> on line 51 with the base URL of your Rulecube instance. E.g. \ **Explanation**\ The code uses the [Bootstrap](https://getbootstrap.com/) framework to create a form for entering the ruleset input with an action for calling the ruleset and displaying the calculated output. 4. Save the HTML file and open it in your browser.\ ↳ Your web page should look like this:
5. Enter input values into the calculator and click **Calculate loan amount**.\ ↳ The JavaScript code calls the ruleset through its API and parses the output into the web page. ## Recap You have integrated your ruleset into a web page, which brings you to the end of this tutorial. ## What's next? Excellent, you've finished the Rulecube tutorials. But the fun has only just begun. Check out the rest of Rulecube's documentation to learn more: * [**How-to Guides**](/how-to-guides.md)\ Hands-on, step-by-step guides to execute specific tasks in Rulecube. Most suitable if you're trying to get something done. * [**Language (Methods) Reference**](/language-reference.md)\ A detailed explanation of Rulecube ready-to-use methods. Suitable if you need all information about a specific method to fully exploit it in functions or rules. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.rulecube.com/how-to-guides/use-a-ruleset-from-your-software.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.