Elfsight を使用して Webflow Web サイトに WhatsApp チャット ウィジェットを挿入するプロセスを 4 つの簡単な手順で確認します。
- Elfsightでウィジェットを生成する
- コードを複製する
- コードをWebflowに埋め込む
- 最終決定とテスト
設定していない場合は エルフサイト まだアカウントをお持ちでない場合は、さまざまなウィジェットを探索するためにアカウントを作成してください。具体的には、このガイドでは、 WhatsAppチャット ウィジェット。
Elfsightにログインしたら、 応用 ページでWhatsAppを検索します。そこから WhatsAppチャット ウィジェットを作成するオプション。
Elfsightでウィジェットを生成する
WhatsApp ウィジェットを取得したら、テンプレートを選択します。
- ウィジェットに名前を付けます（例：WhatsApp埋め込み）
- ウィジェットレイアウトテンプレートを選択する
- タップ テンプレートを続行する
次に、カスタマイズに進みます。
- コンテンツ
- 設定
- デザイン
WhatsAppの電話番号を入力して開始します。 コンテンツ セクションで、ウィジェットを Webflow プロジェクトに合わせてカスタマイズします。
コンテンツ
の コンテンツ 機能を使用すると、次のものを変更できます。
- チャットバブル
- チャットヘッダー
- ようこそメッセージ
- チャット開始ボタン
チャットバブル
タップすると チャットバブル オプションでは、チャットバブルアイコンを選択し、カスタム入力することができます バブルテキスト アイコンの横に表示します (テキストが追加されていない場合は空のままになります)。
チャットヘッダー
を選択 チャットヘッダー 次のようなヘッダーのカスタマイズを探索するオプション:
- チャットを開いたときに表示されるプロフィール写真
- プロフィール写真の横の名前
- 名前の下のキャプション
ようこそメッセージ
アクセス ようこそメッセージ チャットの開始メッセージを入力する機能。
チャット開始ボタン
使用方法 チャットを始める オプションを使用すると、WhatsApp を開始するテキストを定義できます。ボタン内の WhatsApp アイコンを表示するか非表示にするかを切り替えることもできます。
設定
の 設定 この機能を使用すると、次の変更が可能になります。
- 位置
- チャット表示設定
- オープンチャットトリガー
- 通知
位置
クリックしてください 位置 ウィジェットの位置を設定できるサイドバーにアクセスするオプション:
- 浮かぶ泡
- バブルを埋め込む
- チャットウィンドウを埋め込む
ウィジェットを中央または左/右に揃えることもできます。
チャット表示設定
利用可能な条件は次のとおりです:
- ページ（チャットウィジェットを表示する場所）
- デバイス（モバイル/デスクトップでウィジェットを表示）
- 訪問者（すべての訪問者、新規訪問者、リピーターのチャットを表示）
- 日付と時刻（ウィジェットを表示するタイミング）
オープンチャットトリガー
- ページ滞在時間
- 現地滞在時間
- スクロール位置
- 終了意図
デザイン
変更が完了したら、必ず 店.
埋め込みスクリプトを複製する
ガジェットを Webflow プランに組み込むには、Elfsight の埋め込みスクリプトが必要です。
前の段階で調整が保存された後、埋め込みスクリプトを含むポップアップ ウィンドウが表示されます。スクリプトをクリックすると、自動的にクリップボードにコピーされます。
スクリプトをWebflowに挿入します
Webflow プロジェクトにガジェットを含めるには、プロジェクト全体、すべてのページ、または個々のページの 2 つの方法があります。
プロジェクト全体
すべてのページにガジェットを挿入するには:
- を選択 カスタムコード プロジェクト設定内のタブ
- コピーした埋め込みスクリプトを ヘッドコード プロジェクトのセクション
- 調整を保存
- リリース
- 選択されたドメインへのリリース
述べる: カスタム スクリプトは完成したサイトにのみ表示されます。
公開して検証する
次に、新しいガジェットを公開して検証します。
- プレス リリース
- 公開したいドメインを選択してください
- 選択したドメインへのリリース
- ワークスペーススポットとメンバーの追加または削除 - 2024年4月15日
- センタリングボックスの概要 - 2024年4月15日
- 将来の参照用にサイトを保存する - 2024年4月15日
EN 
ZH 
ZH_CN 
KO 
JA