.png?width=32&height=32&name=Untitled%20(1).png){kind=small}
本記事では、HubSpotのチャットボットから外部APIを呼び出す実装例を紹介します。
具体的には、OpenWeather APIを利用し、チャットに入力された都市名をもとに天気情報を取得・返却する仕組みを実装していきます。
HubSpot標準機能をベースにしつつ、外部APIと連携することで、チャットボットの活用幅を大きく広げることができます。
HubSpot チャットボットとは
HubSpot は、インバウンドマーケティング、セールス、カスタマーサービスを一元管理できるCRM（Customer Relationship Management）で、アメリカのHubSpot社によって開発されています。
HubSpotのチャット機能は、企業が顧客とのコミュニケーションを効率化するためのツールであり、カスタマーサポートの自動化、リードジェネレーション、ユーザーエンゲージメントの向上などを実現できます。
特にチャットボットは24時間365日対応が可能で、顧客からの問い合わせに迅速に応答できる点が特長です。これにより、顧客満足度の向上に加え、サポートチームの負担軽減にもつながります。
一方で、HubSpot標準のチャットボット機能だけでは、外部サービスのデータを動的に取得・活用することはできません。
次のセクションでは、こうした制約を補うために、チャットボットから外部APIと連携するアプローチについて解説します。
HubSpotでチャットチャネルを接続する方法
HubSpotでチャットボットを作成する前に、まずは組織のチャットチャネルをHubSpotに接続しておく必要があります。
チャットチャネルの接続設定を行うことで、ボットが実際にメッセージを受信・送信できるようになります。さらに、受信トレイに接続しておけば、複数のチャネルからのメッセージを1ヶ所で管理でき、コミュニケーションの一元化が可能になります。
ここでは、スクリーンショット付きでその手順を解説します。
Step1.受信トレイにチャットチャネルを接続する
HubSpot画面右上の歯車アイコンをクリックして設定メニューを開き、「ツール」から「受信トレイ」を選択します。
「チャネルを接続」をクリックし、「チャット」を選択してください。
Step2.チャットの設定
チャットウィジェットのデザインは、ブランドに合わせた色やフォントの調整が可能です。
ユーザー向けにチャットの稼働時間帯や応答ルールを定義し、稼働状況に応じた自動対応も設定できます。
チャットの見出しやウェルカムメッセージも自由にカスタマイズでき、利用者への最初の印象を最適化します。
HubSpot チャットボットの作り方
HubSpotのチャットボットを活用すると、顧客からの問い合わせ対応や情報案内を自動化でき、ビジネスの効率化が図れます。
ここからは、実際にHubSpotでチャットボットを作成する手順をスクリーンショット付きで解説します。
Step1.チャットフローの作成
HubSpotのチャットフロー画面から「チャットフローを作成」をクリックします。
チャットフローを追加する場所を選択してください。
今回は、「ウェブサイト」をクリックして進めます。
ワークスペースを選択してください。
今回は「受信トレイ」を選択します。なお、チャット応対で自動的にチケットを発行したい場合は「ヘルプデスク」を選択します。
Step2.ユースケースに合わせてチャットタイプとテンプレートを選択
HubSpotでは、業務ニーズに応じて選択できる7種類のチャットボットテンプレートが用意されています。
それぞれのテンプレートの概要を以下の表にまとめました。
| テンプレートの説明 | |
| 1.コンシェルジュボット | ユーザーを最適なページや担当者へ案内するボットです。 スムーズなナビゲーションを提供することで、顧客体験の向上に貢献します。 |
| 2.リードの見込み判定ボット | ユーザーとの会話を通じて、見込み度を自動で判定します。 これにより、マーケティング・営業担当者が優先すべきリードを効率的に抽出可能です。 |
| 3.ミーティングボット | 営業担当やカスタマー担当のカレンダーと連携し、ユーザーが希望する日程で直接ミーティングを予約できるボットです。 これにより、従来の調整作業が不要となり、迅速かつ効率的な商談設定を実現します。 |
| 4.サポートボット | 顧客からの問い合わせを一次対応し、質問内容を整理・分類して適切な部署や担当者に引き継ぎます。サポートチームの負担を軽減し、顧客満足度を向上させます。 |
| 5.ナレッジベース+サポートボット | ナレッジベース（FAQやヘルプ記事）と連携し、顧客が自己解決できるように関連する記事を提示します。 記事で解決できない場合は、そのまま担当者につなぐことができるため、自己解決率とサポート効率を同時に高めます。 |
| 6.オフラインボット | 担当者が不在の時間帯や営業時間外に訪問者対応を行い、問い合わせ内容や連絡先を記録します。 収集した情報は翌営業日に担当者へ共有されるため、問い合わせを取りこぼさず顧客対応を継続できます。 |
| 7.ゼロから始める |
導入目的や業務課題に合わせてユーザー独自のチャットボットを構築できます。 |
※一部テンプレートは利用プラン条件がございます。詳細はHubSpot公式のナレッジを参照ください。
「ルールに基づくチャットボット」を選択すると、各テンプレート一覧が表示されるので目的に合ったものを選択します。
今回は「ゼロから始める」をクリックして進めます。
Step3.ナレッジベース設定
ナレッジベースを有効化することで、チャットボットからナレッジ記事を参照できるようになります。
Step4.チャットボットのアクションを追加する
アクションは、チャットボットがユーザーとの会話に応じて実行する処理を指します。
ユーザーの入力や分岐条件に応じて、「質問」「ナレッジベースの案内」「担当者への転送」などの動作を組み合わせて設定できます。
実際にチャットボット画面で表示されるメッセージやチャットフローを設計・編集していきます。
初期状態では歓迎メッセージが設定されていますが、業務内容やユースケースに合わせて自由にカスタマイズし、利用シーンに最適化しましょう。
歓迎メッセージ下部の「＋」ボタンをクリックして新規アクションを追加します。
クリックすると、アクションを新規作成・編集ができる画面が右側に表示されます。ユーザーの入力に対してボットがどのように反応するかを設定ができます。
Step5.対象を設定
「対象」タブの画面からチャットボットがウェブサイトのどのページに表示されるのかを設定します。
この設定により、指定したページにのみチャットボットが表示されます。
Step6.「表示」を設定
「表示」タブでは、チャットボットに表示されるロゴや画像、動作を柔軟にカスタマイズできます。
自社のロゴやキャラクターは、「チャットアバターを選択」から設定できます。
「チャット表示の動作」では、チャットボットの表示方法や応答のタイミングを細かく調整できます。
例えば、歓迎メッセージの非表示設定や、ユーザーの滞在時間に応じた自動表示タイミングの切り替えが可能です。
Step7.「オプション」でその他の設定
「オプション」タブでは、エラーメッセージの表示内容やチャットボットの利用言語など、詳細な挙動を事前に設定できます。
Step8.チャットボットのテストを実施
「プレビュー」機能を使って、実際のチャットボット画面の動作や表示内容を確認できます。テストメッセージを送信し、応答やシナリオが想定通り機能するか事前に確かめましょう。
Step9.チャットボットの公開と分析
テストが完了したらチャットボットを公開します。
公開後は、利用状況や会話ログを確認しながら、必要に応じてチャットフローやアクションを継続的に改善していきましょう。
外部API（OpenWeather API）との連携処理の流れ
今回は、HubSpotのチャットボットと外部APIの疎通確認を目的として、無料で利用できる天気情報API「OpenWeather API」との連携を実装しました。
チャット内でユーザーが都市名を入力すると、その都市の現在の天気と気温をAPIから取得し、チャット上で応答する仕組みを構成しています。
ここからは、HubSpotのチャットボットと外部APIを連携させる処理の流れを解説します。
処理の流れは、「ユーザー入力 → 外部API呼び出し → レスポンス整形 → チャットへの返却」という構成です。
Step1.アクションの追加
チャットフロー内で新規アクションを追加し、「コードスニペットを実行」を選択します。
Step2.コードの入力
アクションの名前および説明を設定し、実行するコードスニペットを入力します。
今回の連携処理では、ユーザーが入力した都市名をもとに OpenWeather API を呼び出し、
取得した天気情報をチャットボットの応答として返却する処理を、
HubSpot の「コードスニペット」アクションで実装します。
本処理では以下のフローを実装しています。
- ユーザーが入力した都市名を取得
- OpenWeather APIへリクエスト送信
- APIレスポンスを受信してJSON形式へ変換
- 正常なレスポンスなら天気情報と気温を取得し、チャットで返答
- 都市名が無効または通信障害時はエラーメッセージを返却
const https = require('https');
exports.main = (event, callback) => {
const userMessage = event.userMessage.message?.trim(); // 例: "Tokyo"
const apiKey = 'xxxxxxxxx';
if (!userMessage) {
callback({
botMessage: '都市名を入力してください。',
responseExpected: false
});
return;
}
const url = `https://api.openweathermap.org/data/2.5/weather?q=${encodeURIComponent(userMessage)}&appid=${apiKey}&units=metric&lang=ja`;
https.get(url, (resp) => {
let data = '';
resp.on('data', (chunk) => data += chunk);
resp.on('end', () => {
try {
const weatherData = JSON.parse(data);
if (weatherData.cod !== 200) {
callback({
botMessage: `天気情報が取得できませんでした。ローマ字で入力してください。`,
responseExpected: false
});
return;
}
const temp = weatherData.main.temp;
const description = weatherData.weather[0].description;
callback({
botMessage: `${userMessage}の天気は「${description}」、気温は${temp}℃です。`,
responseExpected: false
});
} catch (err) {
callback({
botMessage: '天気情報の解析中にエラーが発生しました。',
responseExpected: false
});
}
});
}).on('error', (err) => {
callback({
botMessage: `データ取得エラー: ${err.message}`,
responseExpected: false
});
});
};
Step3.チャットボットのテストを実施
「プレビュー」機能を使って、実際のチャットボット画面の動作や表示内容を確認します。
ユーザーがチャットで都市名を入力すると、OpenWeather API から取得した天気情報と気温が、チャットボットの応答として表示されます。
まとめ
HubSpot のチャットボットは標準機能でも十分に活用できますが、外部 API と連携することで、より柔軟な応答や動的な情報提供が可能になります。
本記事では、OpenWeather API を例に、チャット上のユーザー入力をもとに外部 API を呼び出し、その結果をチャットボットの応答として返却するシンプルな連携方法を紹介しました。
天気情報の取得はあくまで一例ですが、在庫照会や予約管理、社内システムとの連携など、ビジネス要件に応じたさまざまなユースケースへ応用できます。
顧客との接点を自動化しつつ、より付加価値の高い体験を提供したい場合、HubSpot のチャットボットと外部 API の連携は有効な選択肢となるでしょう。