# Web サイトに埋め込む・API で送る

> 作ったフォームを自分の Web サイトに 2 行で埋め込む方法と、自分のサイトのデザインのまま API で回答を送る方法、Webhook で回答を受け取る方法です。

公開したフォームは、公開ページのほかに、Web サイトへの埋め込みと API（ヘッドレス）でも受け付けられます。コードは、フォームの「共有」のタブからコピーできます。

## Web サイトに埋め込む

「共有」のタブの「Web サイトに埋め込む」にある 2 行を、フォームを出したい場所に貼ります。

```html
<div data-mukumo-form="公開の ID"></div>
<script src="https://app.mukumo.com/f/embed.js" async></script>
```

- 高さは中身に合わせて自動で変わります。
- 送ったあとに移るページを決めていると、Web サイトのページごと移ります。
- 送ったとき、`div` に `mukumo-form:submitted` のイベントが出ます。計測のタグをつなげるときに使えます。
- 隠しの値に、Web サイトの URL の値（例: `?utm_source=...`）を渡すときは、`div` に `data-hidden="utm_source,utm_campaign"` のようにキーを書きます。

スクリプトを貼れないところ（一部のブログのブロックなど）では、同じタブの iframe のコードを使います。この場合、高さは固定です。

## 自分のサイトのデザインで送る（API）

自分のサイトのフォームの送り先だけを mukumo にします。

- ふつうの HTML のフォームなら、`action` を `https://app.mukumo.com/api/forms/公開の ID/submissions`、`method` を `post` にします。各項目の `name` は、「共有」のタブの「項目のキー」と同じにします。送れたら、送ったあとに移るページ（なければ公開ページの完了の画面）へ移ります。
- JavaScript から送るときは、JSON で `POST` します。受け付けると `201` で `{ "ok": true, "id": "…", "number": 12 }` が返ります。答えがおかしいときは `400` で、`fields` に項目ごとの理由（`required` か `invalid`）が返ります。
- フォームの項目は `GET https://app.mukumo.com/api/forms/公開の ID` で読めます。

機械からの送信よけに、`_hp` という名前の空の欄を、人に見えない形で置いてください。埋まっていた送信は残しません。

## 使えるサイトを絞る

設定の「埋め込み・API を使えるサイト」にサイトの URL（例: `https://example.com`）を入れると、そのサイトだけで埋め込め、ブラウザからの API の送信もそのサイトからだけ受け付けます。空のときは、どのサイトからでも使えます。

## Webhook で回答を受け取る

設定の「Webhook」に送り先の URL（https）を入れると、回答が届くたびに、回答を JSON で送ります。ヘッダーの `X-Webhook-Signature`（`t=時刻,v1=署名`）は、設定の「署名の秘密」で `"時刻.本文"` を HMAC-SHA256 で計算した値です。同じになるかを確かめると、mukumo から届いたことを確かめられます。