メインコンテンツへスキップ
Kameleoon プラットフォームで直接コーディングすることで、高度にカスタマイズ可能なウィジェットテンプレートを作成します。
コーディングに不慣れな場合は、すぐに使えるウィジェットを利用するか、開発者に協力を依頼してください。

​
新しいテンプレートを作成する

コードを使用して新しいウィジェットテンプレートを作成するには、次の手順に従います。
  1. Studio > Widgets > New widget をクリックします。
  2. Using code を選択します。
  3. テンプレートに名前を付け、Web サイトを関連付け、必要に応じて説明とタグを追加します。
  4. Create をクリックします。

​
テンプレートエディタ

テンプレートエディタには 3 つの異なるエリアがあります。

​
左パネル

左上にはテンプレートのタイトルが表示されます。タイトルにカーソルを合わせ、鉛筆アイコン をクリックしてテンプレートの名前を変更します。 このパネルでテンプレート作成に必要な 2 つの重要なステップにアクセスします。
  • Code to run
  • Configuration form

​
コンテンツゾーン

このエリアにテンプレートのコードを入力します。

​
テンプレートをコーディングする

中央のコンテンツエリアを使ってウィジェットテンプレートをコーディングします。このコードは、Web サイトのページ上にウィジェットを生成します。エディタには、異なるコードタイプ用の 3 つのタブがあります。
  • JS(JavaScript)
  • CSS
  • HTML
デフォルトでは JS タブがアクティブです。コードを空白エリアに記述します。 テンプレートを検証するには、JS タブに少なくとも 10 文字を入力します。テンプレートを作成するのに JavaScript だけで十分ですが、HTML や CSS も追加できます。 リストやテキストフィールドなどの要素を Kameleoon スタイルシートに従ってフォーマットするには、このデフォルト CSS を使用します。 
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap');

body * {
     font-family: "Montserrat";
     font-size: 12px;
}

fieldset {
     border: none;
     border-bottom: 1px solid #dedede;
}

label {
     display: block;
     font-size: 12px;
     margin-bottom: 5px;
}

input, select, textarea {
     display: block;
     padding: 8px 12px;
     width: 100%;
     border-radius: 4px;
     border: 1px solid #eeeeee;
     outline: none;
     font: 400 12px "Roboto", sans-serif;
     color: #333333;
     background: white;
     -webkit-transition: border-color 0.25s ease;
     -o-transition: border-color 0.25s ease;
     transition: border-color 0.25s ease;
}

input:hover, select:hover, textarea:hover,
input:focus, select:focus, textarea:focus {
     border-color: #c6c6c6;
}

textarea {
     resize: vertical;
}

input[type="checkbox"] {
     display: inline-block;
     width: auto;
     position: relative;
     top: 1px;
}

input[type="checkbox"] + label {
     display: inline-block;
}
コードを記述した後、左パネルの Configuration form をクリックしてユーザーインタフェースのステップに進みます。

​
特殊なケース: 変数

ウィジェットでユーザーが指定したフィールド(変数)を使用するには、User Interface タブの対応するフィールドに templateData 属性を追加します。 例: input id="message" type="text" templateData="messageContent" placeholder="Type your message" 変数を取得するには、Code to run タブで UserData を使用します。 例: var userInput = UserData.messageContent; alert(userInput);

​
構成フォームを作成する

Configuration form interface
Configuration form タブを使って、チームメンバーがウィジェットを設定するためのユーザーインタフェースを構築します。このセクションでは HTML タブと CSS タブのみが利用できます。

​
HTML タブ

HTML タブに構成フォーム用の HTML コードを入力します。ユーザーはこのフォームを操作してテンプレートを設定し、ウィジェットを作成します。 フォームの各フィールドには、次の構文で属性を含める必要があります: templateData="[NameOfYourChoice]"。

​
CSS タブ

CSS タブで追加したスタイルはユーザーインタフェースフォームに適用されます。このステップは任意です。
テンプレートを確定するには、エディタページの右上隅にある Activate をクリックします。
JavaScript フィールドに 10 文字未満を入力した場合、Activate は利用できません。

​
作成したテンプレートを管理する

テンプレートを作成すると、Widgets ダッシュボードにカードとして表示されます。

​
実験でウィジェットを使用する

コードウィジェットを実験に関連付けるには:
  1. Graphic editor を使って実験を開くか作成します。
  2. 左サイドバーで Elements の横の Add をクリックします。
  3. 開いた Add element サイドバーで Widgets をクリックします。
  4. リストからカスタムウィジェットを選択して構成します。
Add widget