SmartContact

自社開発のお問い合わせフォームに SDK を設置する

自社開発のお問い合わせフォーム (PHP / Node / Laravel / Rails / Django など、バックエンド言語問わず) に SmartContact SDK を組み込む手順です。確認画面の有無や SPA (React / Vue 等) など、実装パターン別に説明します。

1公開 API キーをコピーする

管理画面の テナント一覧から該当テナントの詳細を開き、「公開 API キー」(SC_PUBLIC_KEY_xxxxx) をコピーします。このキーは公開前提なので、HTML に直接書いて構いません。

2実装パターンを選んで SDK タグを設置

入力画面の </body> 直前に SDK タグを 1 行貼るだけで完結します。SDK が自動的に form を検出して、 AI 判定 / 差し戻しダイアログを動作させます。バックエンド (PHP / Node / Laravel / Rails / Django 等) は言語問わず、通常の POST 受信処理のままで構いません。

<!DOCTYPE html>
<html lang="ja">
<body>
  <form action="/contact/submit" method="post">
    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <textarea name="message" required></textarea>
    <button type="submit">送信</button>
  </form>

  <!-- SDK タグ: </body> 直前 -->
  <script src="https://smart-contact.jp/sdk.js?key=SC_PUBLIC_KEY_xxxxx" defer></script>
</body>
</html>

バックエンド側で SDK が挿入する smartcontact_meta_text をメール本文に取り込みたい場合は 既存メールへの AI 解析組み込み手順 (PHP / Node / Laravel / Rails / Django の例あり) を参照してください。

3動作確認

  1. テスト用にお問い合わせを 1 件送信する
  2. 管理画面 → 該当テナント → 「判定ログを見る」にレコードが現れれば成功
  3. 記録されない場合は SDK が動かない時のチェックリストを参照
SDK の設置が終わったら、お問い合わせメールに AI 解析を組み込むかを決めます。 詳しくは既存メールへの AI 解析組み込み手順を参照してください。
← マニュアルトップへ戻る