スマホ用サイトから電話発信できるようにする方法

昨今ECサイトのスマホ対応化が急速にすすむ中、閲覧ついでに気になった商品について、あるいは配送や決済方法について電話問い合わせをしたいというお客様がいらっしゃいます。今回はそういったニーズに備えて、タップで即時に電話ができる「電話発信用リンク」を設置する方法をご紹介します。

電話発信用リンクを設置する方法

弊社サイトをモバイルで（もしくはPCでブラウザ幅を狭め）閲覧した場合に画面の最上部右に表示されている電話アイコンが電話発信用リンクとなります。

このボタンはa要素のhref属性の値に「telephone=電話番号」とするだけで作成することができます。

【実装デモ】

[基本形]
電話は0000-00-0000まで

[リンクをボタン化]
電話でお問い合わせ

[画像を使う]

実装は下記のようにHTMLを記述することで行います。

//基本形
<a href="tel:0000000000">電話は0000-00-0000まで</a>

//ボタン化
<button><a href="tel:0000000000">電話でお問い合わせ</a></button>

//画像を使う
<a href="tel:0000000000"><img src="画像のパス" /></a>

※メディアクエリあるいはJSを使ってモバイルのみで電話発信できるような実装が推奨されますが今回の記事では説明を割愛します。

終わりに

ネット全盛の世の中といえどもお客様と電話でコミュニケーションがとれることは大きなアドバンテージとなります。お客様と直接話すことによってCSを強化したい、セールストークをしっかりして受注につなげたいといった場合に電話発信用リンクは有効です。是非ご活用ください。

市川