埋め込み用コード¶

このページには、さまざまなウィジェットの埋め込み用コードの構造に関する詳細情報が記載されています。

cTrader Web、お客様の戦略、単一戦略、複数戦略、市場チャート ¶

cTrader Web、市場チャート、お客様の戦略、単一戦略、および複数戦略ウィジェットの埋め込み用コードは以下のようになります。

cTrader Webお客様の戦略単一戦略複数戦略市場チャート

<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>

<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>

<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>

<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>

<div id="ctrader-plugin-root" style="width: 830px; height: 700px; position: relative"></div>
<script id="init" type="text/javascript" defer src="https://ct.spotware.com/widget.js"></script>
<script type="text/javascript">
    const script = document.getElementById('init');

    script.onload = () => {
        putInitScript('runPlugin');
        runPlugin('ctrader-plugin-root', {"route":"/market-chart/?s=EURUSD&period=H1&charttype=candlestick&palettename=dark&lang=en&w=830&h=700"});
    };
</script>

各パラメータと関数の引数は以下のように定義されます。

名前	定義と値
`div id`	`"ctrader-root"`. これは、ウィジェットをWebリソースに埋め込むための一意の識別子です。
`style`	`"width: {number}%, height: {number}%"`. 埋め込みブロックの相対的な幅と高さ（親コンテナのサイズに対する相対値）。親要素の`display`プロパティは`display: block`に設定する必要があることに注意してください。
`type...defer`	`"text/javascript"`. 埋め込みブロックにテキスト形式のJavaScriptが含まれていることを示すディレクティブ。 `defer`属性は、スクリプトがブロックが埋め込まれたリソースのHTML全体をブラウザが解析し終わった後にのみ実行されることを示します。
`'runPlugin'`	実行するスクリプトの名前。
`'ctrader-plugin-root`	埋め込む要素の名前。
`"route"`	埋め込む要素のURL（cTrader WebのベースURLに対する相対値）。
`"appConfig"`	埋め込み要素の設定。可能な値については、以下の行を参照してください。
`"chart":{"initialChartLayout":"Single"}"`	cTrader Webウィジェットの初期チャートモード。 `"initialChartLayout"` を `"Single"`, `"Multi"`, または `"Free"` に設定できます。
`"strategy":{"showStrategyPromotion":false}`	お客様の戦略または任意の戦略ウィジェットに対して戦略プロモーションブロックを表示するかどうかを決定する設定。

警告

これらのウィジェットをWebリソースに埋め込む前に、styleパラメータを設定することが必須です。そうしないと、ウィジェットは表示されません。ウィジェットのwidthとheightのみを指定し、他の属性は空白のままにすることができます。