Hi! I can help with tracking, returns and delivery times.
```
```js bot.js
const answers = {
track: 'Order 4821 was delivered on Thursday 22 October.',
return: 'You can start a return under Your orders within 30 days. We collect large items for free.',
delivery: 'Most orders arrive within five working days.'
};
const fallback = 'Sorry, I didn’t get that. Try a topic below.';
function reply(message) {
const text = message.toLowerCase();
const topic = Object.keys(answers).find((word) => text.includes(word));
return topic ? answers[topic] : fallback;
}
…
```
チャットそのものは正しく作られています。メッセージは名前の付いたログで、入力欄にはラベルがあり、話題はボタンです。足りないのは、その先へ進む道です。三つの言葉のどれも含まない質問にはフォールバックが返り、フォールバックは同じ話題を指し、パネルのどこにも担当者への道がありません。
## 修正後：チャットの中の「担当者に問い合わせる」ボタン
```html
Ask Birchwood
Hi! I can help with tracking, returns and delivery times.
```
```js bot.js
const answers = {
track: 'Order 4821 was delivered on Thursday 22 October.',
return: 'You can start a return under Your orders within 30 days. We collect large items for free.',
delivery: 'Most orders arrive within five working days.'
};
const fallback = 'Sorry, I didn’t get that. Try a topic below, or talk to a person.';
function reply(message) {
const text = message.toLowerCase();
const topic = Object.keys(answers).find((word) => text.includes(word));
return topic ? answers[topic] : fallback;
}
…
const personButton = document.querySelector('.chat-person');
const personForm = document.querySelector('#person-form');
personButton.addEventListener('click', () => {
personForm.hidden = false;
personButton.setAttribute('aria-expanded', 'true');
personForm.querySelector('textarea').focus();
});
personForm.addEventListener('submit', async (event) => {
event.preventDefault();
const body = new FormData(personForm);
const chat = [...document.querySelectorAll('.chat-messages p')].map((p) => p.textContent);
body.append('chat', chat.join('\n'));
await fetch('/support/messages', { method: 'POST', body });
personForm.querySelector('.person-sent').textContent = 'Sent. We’ll reply by email within one working day.';
});
```
ボタンは最初のメッセージのときから話題の下にあるので、ボットにつまずく前に見つけられます。ボットがあきらめたときには、フォールバックもこのボタンを案内します。ボタンで開くのは2項目だけのフォームで、認知アクセシビリティのガイダンスが勧める短い経路です。誰がいつ返信するかを示し、会話も一緒に送るため、同じ説明を繰り返す必要がありません。送信したことはステータスの行で伝わります。フォームの送信先はスタッフの受信箱です。誰も読まない連絡方法につながるボタンは、同じ人たちを後で困らせるだけです。
## 修正後：最小の変更として、チャットにメールアドレス
```html
Ask Birchwood
Hi! I can help with tracking, returns and delivery times.
Rather write to a person? Email help@birchwood.example. We reply within one working day.