Skip to content

Embed Codes

This page contains detailed information about the structure of the embed codes of different widgets.

cTrader Web, Your Strategies, Single Strategy, Multiple Strategies

The embed code for the 'cTrader Web', 'Your Strategis', and 'Single Strategy' widgets should look like this.

Warning

Setting the style parameter of these widgets is mandatory before embedding them on your web resource; otherwise, the widgets will not be displayed. You can only specify the width and height of widgets and leave all other attributes blank.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div id="ctrader-plugin-root" style="width: 100%, height: 100%"></div>
<script id="init" type="text/javascript" defer src="https://app.ctrader.com/widget.js"></script>
<script type="text/javascript">
    const script = document.getElementById('init');

    script.onload = () => {
        putInitScript('runPlugin');
        runPlugin('ctrader-plugin-root', {"route":"/?lang=en&theme=light&u=letstrade747","appConfig":{"chart":{"initialChartLayout":"Single"}}});
    };
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div id="ctrader-plugin-root" style="width: 100%, height: 100%"></div>
<script id="init" type="text/javascript" defer src="https://app.ctrader.com/widget.js"></script>
<script type="text/javascript">
    const script = document.getElementById('init');

    script.onload = () => {
        putInitScript('runPlugin');
        runPlugin('ctrader-plugin-root', {"route":"/copy-provider/?lang=en&theme=dark&providerNickname=letstrade747&u=letstrade747","appConfig":{"strategy":{"showStrategyPromotion":true}}});
    };
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div id="ctrader-plugin-root" style="width: 100%, height: 100%"></div>
<script id="init" type="text/javascript" defer src="https://app.ctrader.com/widget.js"></script>
<script type="text/javascript">
    const script = document.getElementById('init');

    script.onload = () => {
        putInitScript('runPlugin');
        runPlugin('ctrader-plugin-root', {"route":"/esp/2082/?lang=en&theme=dark&u=letstrade747","appConfig":{"strategy":{"showStrategyPromotion":false}}});
    };
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div id="ctrader-plugin-root" style="width: 100%; height: 100%; position: relative"></div>
<script id="init" type="text/javascript" defer src="https://app.ctrader.com/widget.js"></script>
<script type="text/javascript">
    const script = document.getElementById('init');

    script.onload = () => {
        putInitScript('runPlugin');
        runPlugin('ctrader-plugin-root', {"route":"/multiple-strategies/?lang=en&theme=dark&u=letstrade747&strategyIdList=2082%2C2203","appConfig":{"strategy":{"showStrategyPromotion":true}}});
    };
</script>

, where each parameter and function argument is defined as follows.

Name Definitions and Values
div id "ctrader-root". This is the unique identifier for embedding the widget in a web resource.
style "width: {number}%, height: {number}%". The relative width and height of the embedded block (relative to the size of the parent container). Note that the display property of the parent element has to be set to display: block.
type...defer "text/javascript". The directive that states that the embedded block contains JavaScript in text format. The defer attribute states that the script should only be executed after the browser finishes parsing the entire HTML of the resource where the block is embedded.
'runPlugin' The name of the script to be executed.
'ctrader-plugin-root The name of the element to embed.
"route" The URL of the element to embed relative to the base cTrader Web URL.
"appConfig" The configuration of the embedded element. For possible values, see the following rows.
"chart":{"initialChartLayout":"Single"}" The initial chart mode of the 'cTrader Web' widget. "initialChartLayout" can be set to "Single", "Multi", or "Free".
"strategy":{"showStrategyPromotion":false} The configuration that determines whether the 'Strategy Promotion' block is shown for the 'Your Strategies' or 'Any Strategies' widgets.