ウェブサイトの問い合わせフォームを送信するとZendeskチケットに変換される方法

 ウェブサイトに 1:1問い合わせフォームを作成し、これを通じてZendeskにチケットが自動生成されるように連携する方法を以下のように段階的にご案内いたします。

以下は参考のための例としてZendesk API情報を確認して実装する必要があります。

✅ 目標

ウェブサイトのHTMLフォームに入力されたデータ → Zendeskチケットに送信
👉 結果: Zendeskに問い合わせチケットが自動的に生成される

✅ 実装方式の概要

🧩 方法 1: 最終ユーザーが直接リクエストする場合 (Zendesk Request API)

Zendeskは 非会員/顧客ユーザーもチケットを生成できるように requests.json APIを提供しています。

🔗 APIエンドポイント

POST https://{your_subdomain}.zendesk.com/api/v2/requests.json

📝 1. HTML問い合わせフォームの例

<form id="inquiry-form">
  <input type="text" name="name" placeholder="名前" required />
  <input type="email" name="email" placeholder="メール" required />
  <textarea name="message" placeholder="問い合わせ内容" required></textarea>
  <button type="submit">問い合わせる</button>
</form>

⚙️ 2. JavaScriptを使用したZendeskチケット生成コード (クライアントサイド)

<script>
document.getElementById('inquiry-form').addEventListener('submit', async function (e) {
  e.preventDefault();

  const name = e.target.name.value;
  const email = e.target.email.value;
  const message = e.target.message.value;

  const response = await fetch('https://{your_subdomain}.zendesk.com/api/v2/requests.json', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Basic ' + btoa('user@example.com/token:YOUR_API_TOKEN')  // 管理者アカウント認証
    },
    body: JSON.stringify({
      request: {
        requester: { name, email },
        subject: `ウェブサイト問い合わせ: ${name}`,
        comment: { body: message }
      }
    })
  });

  if (response.ok) {
    alert('問い合わせが成功裏に受け付けられました！');
  } else {
    alert('エラーが発生しました。再試行してください。');
  }
});
</script>

🔐 user@example.com/token形式を使用する場合、Zendesk Adminの APIトークンを発行して使用する必要があります。
Zendesk → Admin Center > アプリと統合 > API > トークンを有効化

🔄 方法 2: サーバーサイドリクエスト (例: Node.js, PHP)

セキュリティ上、APIトークンをブラウザに露出させたくない場合、 サーバーでリクエストを代わりに送信する方法も多く使用されます。

Node.jsの例 (Express)

const express = require('express');
const axios = require('axios');
const app = express();
app.use(express.json());

app.post('/send-to-zendesk', async (req, res) => {
  const { name, email, message } = req.body;

  try {
    const response = await axios.post('https://{your_subdomain}.zendesk.com/api/v2/requests.json', {
      request: {
        requester: { name, email },
        subject: `ウェブ問い合わせ: ${name}`,
        comment: { body: message }
      }
    }, {
      auth: {
        username: 'user@example.com/token',
        password: 'YOUR_API_TOKEN'
      }
    });

    res.status(200).send({ success: true });
  } catch (error) {
    res.status(500).send({ error: error.message });
  }
});

👉 クライアントでは /send-to-zendeskにPOSTリクエストを送信するだけでよいので、APIトークンが露出されません。

✅ 補完事項 (推奨)

✉️ 例示チケットデータ (JSON)

{
  "request": {
    "requester": {
      "name": "홍길동",
      "email": "hong@example.com"
    },
    "subject": "ウェブサイト問い合わせ",
    "comment": {
      "body": "1:1問い合わせ内容です。"
    }
  }
}

🔐 Zendesk APIトークン発行方法

1. Zendesk Admin Centerにアクセス
2. アプリと統合 > Zendesk API
3. トークンアクセスを有効化
4. APIトークン生成 → メモしておく

📌 まとめ

• HTMLフォーム + JS or サーバーコードで簡単に連携可能
• セキュリティのためトークンはクライアントに直接露出しないことを推奨
• 必要に応じてグループ/フィールドの自動分類、添付ファイル、SLA指定なども拡張可能