Skip to content

Create WebView plugins with AI

In just a few steps, you can easily create a web service for your WebView plugin with AI. No programming knowledge or skills are required.

Brainstorm plugin ideas

If you already know what type of web service you want to create, skip this section and move on to the next.

Alternatively, you can ask your preferred AI to brainstorm ideas.

Prompt

I want to create a web app that will be displayed as a WebView plugin within cTrader. 
Suggest useful ideas that will enhance my trading experience.
Answer
  • Smart trade assistant
  • Trade calculator
  • Custom symbol dashboard
  • Symbol notes & collaboration tool
  • Risk management dashboard
  • News impact tracker
  • Session heatmap tool
  • Trade co-pilot (AI notes & feedback)

Generate the website code

WebView plugins in cTrader require externally hosted websites that use the standard stack of JavaScript, HTML, CSS and (if necessary) WebView SDK methods.

For a more accurate response, provide the AI with the following input data:

Warning

Any WebView plugin you create must comply with the rules of cTrader Store, App Store and Google Play. Most importantly, your web service must not include authentication or payment forms.

For your convenience, you can download the WebView plugin documentation and cTrader Store rules, in case you prefer to upload them as files for the AI to reference.

Prompt

I want to create a trade calculator web app to be used as a WebView plugin in cTrader. 
The website should be built using only JavaScript, HTML, CSS and the SDK methods for WebView plugins. 
No additional libraries should be required. 
The website must comply with the rules of cTrader Store, Apple's App Store and Google’s Play Store.
The website must not include authentication or payment forms.
Provide a single piece of code that contains everything necessary to build the website without any additional setup.
Answer 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Trade Calculator</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      background-color: #f4f4f4;
      color: #333;
    }
    h1 {
      text-align: center;
    }
    .container {
      max-width: 400px;
      margin: auto;
      padding: 20px;
      background: white;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    label, input, select {
      display: block;
      width: 100%;
      margin-bottom: 15px;
    }
    input, select {
      padding: 8px;
      font-size: 1em;
    }
    button {
      padding: 10px;
      background-color: #007acc;
      color: white;
      border: none;
      font-size: 1em;
      cursor: pointer;
      width: 100%;
    }
    button:hover {
      background-color: #005fa3;
    }
    .result {
      margin-top: 20px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Trade Calculator</h1>
    <label for="symbol">Symbol (e.g., EURUSD)</label>
    <input type="text" id="symbol" value="EURUSD"/>

    <label for="volume">Volume (Lots)</label>
    <input type="number" id="volume" value="1" min="0.01" step="0.01"/>

    <label for="price">Price</label>
    <input type="number" id="price" value="1.1000" step="0.0001"/>

    <label for="leverage">Leverage</label>
    <input type="number" id="leverage" value="100" step="1"/>

    <button onclick="calculate()">Calculate</button>

    <div class="result" id="result">Margin: --</div>
  </div>

  <script>
    function calculate() {
      const volume = parseFloat(document.getElementById("volume").value);
      const price = parseFloat(document.getElementById("price").value);
      const leverage = parseFloat(document.getElementById("leverage").value);

      // Standard 100,000 units per lot
      const notional = 100000 * volume;
      const marginRequired = (notional / leverage) * price;

      document.getElementById("result").innerText = 
        `Margin Required: ${marginRequired.toFixed(2)} (base currency units)`;
    }

    // WebView Plugin SDK Example
    window.addEventListener("message", (event) => {
      const message = event.data;
      if (message.type === "symbolUpdate") {
        document.getElementById("symbol").value = message.symbol;
      }
    });

    // Send initial readiness signal
    window.parent.postMessage({ type: "ready" }, "*");
  </script>
</body>
</html>

Deploy the web service

Paste the generated code into an HTML file and save it (locally) on your computer.

To deploy the web service, you need to host the HTML file on a secure server. You have to acquire a domain name, register with a hosting provider and then upload your HTML file using cPanel/hPanel or via FTP.

You can ask the AI for assistance using these prompts:

Prompt

Walk me through getting a domain name and setting it up with a hosting provider.

Test the web app

Open the new website in your browser. Test the features on the site to confirm that they work properly.

Depending on the appearance of your live website, you might want to return to your AI tool and ask it for refinements. For example, you can ask the AI to edit the website code as follows:

  • Fix a functionality that is not working properly
  • Change the colour theme
  • Add a specific feature
  • Remove a specific feature
  • And more

After making the adjustments, return to the file, paste the edited code and deploy the changes.

Once your web app is ready and you know the URL, you can proceed to build your WebView plugin in cTrader.