Skip to main content
PBX Widgets は、新しいパーソナライゼーションビルダーで構築された実験やパーソナライゼーション用のウィジェットを作成します。HTML、CSS、JavaScriptを自分で記述する必要はありません。代わりに、ウィジェットを記述すると、PBXがコンポーネントを生成します。 このアプローチにより、マーケター、プロダクトマネージャー、コンバージョン率最適化（CRO）スペシャリストは、技術的な専門知識なしにUIコンポーネントを迅速に構築できます。 PBXで作成される典型的なウィジェットには、次のようなものがあります。
  • ニュースレター登録ポップアップ
  • プロモーションバナー
  • 離脱意図オファー
  • リードキャプチャフォーム
  • 商品レコメンデーションパネル
  • サーベイまたはフィードバックモーダル
PBXウィジェットは、レガシーパーソナライゼーションをサポートしていません。新しいパーソナライゼーションビルダーへのアクセスが必要な場合は、カスタマーサクセスマネージャーにお問い合わせください。

​
ウィジェットを作成する

PBXを使用してウィジェットを生成および調整するには、次の手順に従います。

​
1. PBXを開く

Kameleoonインターフェースでウィジェットの生成を開始するには:
  1. Studio > Widgets に移動します。
  2. New widget をクリックします。
  3. Using a prompt を選択します。
  4. ポップインメニューで必要な情報を入力します。
  5. Create をクリックします。

​
2. プロンプトを書く

プロンプトフィールドに、構築したいウィジェットを記述します。PBXはこの説明を使用して、ウィジェットUIを自動的に生成します。プロンプトでゴールを追跡する場合は、先にゴールを作成してください。 Example prompt:
デモショップページ上の PBX ニュースレターポップアップのプレビュー。AI チャットが左の画像パネルを削除したところです。

​
3. プレビューと反復

生成されたウィジェットを確認し、次のようなフォローアッププロンプトで調整します:
  • “Make the CTA button larger”
プロンプト 'make the CTA button twice bigger' の後、拡大された Subscribe now ボタンを表示した、ニュースレターポップアップの PBX プレビュー
  • “Change the background color to a darker beige”
プロンプト 'make the background a darker beige' の後、より濃いベージュの背景を表示した、ニュースレターポップアップの PBX プレビュー
  • “Make the popup appear after 3 seconds”

​
4. ウィジェットのコードを編集する

生成されたウィジェットのJavaScriptまたはCSSコードを、プロンプトで調整するのではなく直接編集します。
  1. ヘッダーのcodeアイコンをクリックして、View code タブを開きます。
  2. Edit code をクリックします。
  3. ウィジェットのJavaScriptまたはCSSコードを編集します。
JS コードと Edit code ボタン、AI チャットパネルを表示した、Sticky offer banner styles バージョンの PBX コードビュー
ウィジェットの複数のバージョンを生成した場合は、編集したいバージョンを Selected version ドロップダウンから選択します。編集できるのは最新バージョンのみです。それ以前のバージョンは、コードの表示とコピーのみ可能で、編集はできません。

​
5. ゴールを追加する

プロンプトにゴールを追加することで、メール送信、ボタンクリック、フォーム完了、ウィジェット表示などの訪問者のインタラクションを追跡します。
PBXウィジェットでゴールを追跡する前に、ゴールを作成する必要があります。
Example prompts for goals:
  • Newsletter signup: Track a goal called "Newsletter Signup" when the user clicks the Subscribe button.
  • CTA click: Track a goal when the CTA button is clicked. Goal name: Promo CTA Click
  • Widget engagement: Track a goal when the popup is displayed. Goal name: Widget Viewed

​
ウィジェットのアクセシブルなバージョンを生成する（オプション）

Generate accessible version はベータ版であり、一部のお客様のみが利用できます。
PBXは、ウィジェットのWCAG 2.1 AAアクセシビリティ標準に準拠したバージョンを生成できます。
  1. PBXで生成したバージョンのメニューを開きます。
  2. Generate accessible version を選択します。PBXがウィジェットに適用するアクセシビリティルールを表示します。
  3. PBXはウィジェットの新しいバージョンを作成し、行ったすべての変更を一覧表示します。

​
Kameleoonでウィジェットの回答を収集する（オプション）

ウィジェットがNPSスコアやフィードバックコメントなど、訪問者に質問する場合、Google Sheetsのような外部ツールを設定せずに回答を収集する方法が必要です。PBXはウィジェットに質問または入力フィールドが含まれていることを検出し、結果として得られる回答をKameleoon内で直接収集できるようにします（現在ベータ版）。収集した回答は、CSVファイルとしてエクスポートできます。

​
1. 回答収集を有効にする

PBXが質問または入力フィールドを含むウィジェットを生成すると、回答を収集するかどうかを選択するよう求められます。
  1. Collect widget responses? プロンプトで、オプションを選択します。
    • Yes, collect responses via Kameleoon: Kameleoonが各回答を収集し、CSVエクスポート用に利用できるようにします。
    • No, don’t collect responses: Kameleoonはウィジェットの回答データを収集しません。
  2. Apply をクリックします。
Yes、Noのオプションと Apply ボタンを含むウィジェット回答収集プロンプト

​
2. ウィジェットフィールドに名前を付ける

Kameleoonは、ウィジェットのフィールド名をエクスポートされたCSVファイルの列見出しとして使用するため、各フィールドにわかりやすい名前を付けてください。
  1. Widget response settings パネルを開きます。
  2. Field 1、Field 2 など、自動生成されたフィールド名を確認します。
  3. フィールド名にカーソルを合わせ、鉛筆アイコンをクリックして編集します。
  4. 名前を入力し、チェックマークをクリックして確定するか、キャンセルアイコンをクリックして変更を破棄します。
  5. Apply をクリックして変更を保存します。
ウィジェットフィールド名のリストと Apply ボタンを含むウィジェット回答設定パネル
フィールド名を少なくとも1つ変更するまで、Apply は無効のままです。

​
エクスポートに含まれる内容

Kameleoonは、PBXウィジェットを通じて収集された回答を、アンケートのCSVエクスポートと同じ条件でエクスポートします。エクスポートされたファイルには、次の内容が含まれます。
  • 回答のタイムスタンプ
  • 訪問者コード
  • 質問ごとの回答
  • キャンペーンとバリエーションの詳細

​
ウィジェットの回答をGoogle Sheetsに送信する（オプション）

PBXウィジェットからアンケートとフォームの回答をGoogle Sheetsに送信するには、まずサーベイ回答を Google Sheets に送信するに記載されている通りにGoogle Sheetを設定します。 ウィジェットをGoogle Sheetsに接続するためのプロンプトを書く際は、次のガイドラインに従ってください。
  1. Define a clear submission trigger: リクエストをトリガーする要素を指定します。トリガーは通常、メインのCTAボタン（たとえば、SubmitButton）です。
  2. Use an external HTTP POST request: メソッドを POST に設定し、Google Apps Script Web AppのURLを含めます。
  3. Provide the Web App URL explicitly: 常に完全なURL（たとえば、https://script.google.com/macros/s/XXXXXXXX/exec）を含めます。PBXはこれを自動的に推測または生成できません。
  4. List all elements to send: すべてのフィールドを明示的に指定します（たとえば、email、rating、comment）。
  5. Match parameter names exactly: ウィジェット要素名、リクエストペイロード、およびGoogle Sheetsの列ヘッダーの間で名前が完全に一致することを確認します。
暗黙的な動作に頼らないでください。PBXは正確なフィールド名を必要とします。
Example prompt for Google Sheets integration:

​
効果的なプロンプトの書き方

うまく書かれたプロンプトは、生成されるウィジェットの品質を大幅に向上させます。

​
明確な構造を使う

効果的なプロンプトは論理的な構造に従います。
Example:

​
具体的にする

具体的なプロンプトは、より正確なレイアウトとスタイルを生み出します。 Bad prompt: Create a popup for a newsletter Better prompt: Create a centered modal popup for newsletter subscription with a modern ecommerce design. Include an email input field and a large CTA button offering 15% off.

​
UI要素を明示的に定義する

タイトル、ボタン、入力、セカンダリリンク、アイコン、画像など、必要な要素を常に指定します。 Example:

​
動作を記述する

PBXは、指定すればウィジェットのロジックを生成できます。 Examples:
  • Show popup after 5 seconds
  • Close popup when clicking outside
  • Close popup when clicking "No thanks"

​
書き直すのではなく反復する

プロンプト全体を書き直すのではなく、ウィジェットを段階的に調整します。反復的なプロンプトは結果を効率的に改善します。 Examples:
  • Make the CTA button darker
  • Increase padding inside the popup
  • Add rounded corners to the input field

​
FAQ

PBX ウィジェットと AI 生成ウィジェットには異なる編集要件があります。
  • PBX widgets: これらのウィジェットを作成するには自然言語を使用します。PBX インターフェイス内でのみ編集できます。Widget Studioで PBX ウィジェットを開いたり編集したりすることはできません。
  • AI生成ウィジェット（Widget Studio）: Widget Studioで Create with AI 機能を使用すると、Kameleoon は標準的なWidget Studio要素を使用します。これらのウィジェットは、Widget Studioで手動編集できます。PBX で開いたり編集したりすることはできません。