Skip to main content

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

PBX Widgets は、新しいパーソナライゼーションビルダーで作成された実験やパーソナライゼーション用のウィジェットの作成を支援するAI駆動のUIジェネレーターです。HTML、CSS、JavaScriptを手動で記述する代わりに、ウィジェットを自然言語で記述すると、PBXがコンポーネントを自動的に生成します。 このアプローチにより、マーケター、プロダクトマネージャー、CROスペシャリストは、技術的な専門知識なしにUIコンポーネントを迅速に構築できます。 PBXで作成される典型的なウィジェットには、次のようなものがあります。
  • ニュースレター登録ポップアップ
  • プロモーションバナー
  • 離脱意図オファー
  • リードキャプチャフォーム
  • 商品レコメンデーションパネル
  • 調査またはフィードバックモーダル
PBXウィジェットは、レガシーパーソナライゼーションと互換性がありません。必要に応じて、CSMに新しいパーソナライゼーションへのアクセスをリクエストできます。

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

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

​
1. PBXを開く

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

​
2. プロンプトを書く

プロンプトフィールドに、構築したいウィジェットを記述します。PBXはこの説明を使用して、ウィジェットUIを自動的に生成します。 プロンプトの例: 
Create a centered modal popup widget.

- Layout: Two columns with an image placeholder on the left and a subscription form on the right.
- Content:
  - Title: Join an Exclusive Community
  - Description: Subscribe for exclusive discounts and get 15% off your next purchase.
  - Form: Email input field with placeholder "Enter your email address"
  - CTA button: Subscribe now
  - Secondary link: No thanks
- Style:
  - Modern ecommerce design
  - Rounded UI elements
  - Light beige background
  - Dark CTA button
- Behavior:
  - Display after 5 seconds
  - Close button in top right corner
  - Close popup when clicking "No thanks"
- Tracking: Track a goal called "Newsletter Signup" when the CTA button is clicked.
- Image: Use the following image in the image placeholder on the left: [https://www.whereyourimagelives.com](https://www.whereyourimagelives.com)

​
3. プレビューと反復

希望する結果に到達する最速の方法は、プロンプト反復ワークフローを使用することです。生成されたウィジェットを確認し、フォローアッププロンプトを書いて調整します。例:
  • “Make the CTA button larger”
  • “Change the background color to a darker beige”
  • “Make the popup appear after 3 seconds”

​
4. ゴールを追加する

プロンプトにゴールを追加することで、メール送信、ボタンクリック、フォーム完了、ウィジェット表示などのユーザーインタラクションを追跡します。
PBXウィジェットでゴールを追跡するには、事前に Settings でゴールを設定する必要があります。
ゴールのプロンプト例:
  • 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

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

PBXウィジェットを設定して、アンケートとフォームのレスポンスを直接Google Sheetsに送信できます。まず、このガイドに記載されている通り、Google Sheetを設定する必要があります。 ウィジェットをGoogle Sheetsに接続するためのプロンプトを書く際は、次のガイドラインに従ってください。
  1. 明確な送信トリガーを定義する: リクエストをトリガーする要素を指定します。トリガーは通常、メインのCTAボタン（たとえば、SubmitButton）です。
  2. 外部HTTP POSTリクエストを使用する: メソッドを POST に設定し、Google Apps Script Web AppのURLを含めます。
  3. Web App URLを明示的に指定する: 常に完全なURL（たとえば、https://script.google.com/macros/s/XXXXXXXX/exec）を含めます。PBXはこれを自動的に推測または生成できません。
  4. 送信するすべての要素をリストアップする: すべてのフィールドを明示的に指定します（たとえば、email、rating、comment）。
暗黙的な動作に頼らないでください。PBXは正確なフィールド名を必要とします。
  1. パラメーター名を完全に一致させる: ウィジェット要素名、リクエストペイロード、およびGoogle Sheetsの列ヘッダーの間で名前が完全に一致することを確認します。
Google Sheets統合のプロンプト例: 
Add a system to send widget form data to a Google Sheet using an HTTP request.

- Submission trigger: Use the button named "SubmitButton"
- Request configuration:
  - Request name: SendToGoogleSheets
  - Method: POST
  - Action URL: https://script.google.com/macros/s/AKfycbxxxxxxx/exec
- Data to send: Send the values of the following elements as parameters:
  - email
  - rating
  - comment
- Payload rules:
  - Each parameter key must exactly match the element name
  - Keys must also match the column headers in the Google Sheet
- Behavior:
  - Trigger the request when the SubmitButton is clicked
  - After successful submission, display a confirmation message: "Thank you for your response"
  - Optionally handle errors if the request fails

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

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

​
明確な構造を使う

最良のプロンプトは論理的な構造に従います。 
- Widget type
- Layout
- Content
- Style
- Behavior
例: 
Create a modal popup widget.

- Layout: Two columns with an image on the left and a form on the right.
- Content:
  - Title: Join our community
  - Description: Get 15% off your first order
  - Email field
  - CTA button: Subscribe now
- Style:
  - Modern ecommerce design
  - Rounded buttons
  - Dark beige background
- Behavior:
  - Display after 5 seconds
  - Close button in top right corner
- Image: Use the following image in the image placeholder on the left: https://www.whereyourimagelives.com

​
具体的にする

具体的なプロンプトは、より正確なレイアウトとスタイルを生み出します。 悪いプロンプト: Create a popup for a newsletter より良いプロンプト: 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要素を明示的に定義する

タイトル、ボタン、入力、セカンダリリンク、アイコン、画像など、必要な要素を常に指定します。 例: 
Add:
- Email input field
- Large CTA button
- Small legal disclaimer text
- "No thanks" link below the button

​
動作を記述する

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

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

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