【LINE URLスキーム】ラインアプリを起動させて、デフォルトのテキストメッセージ送信をしてもらいたい！
はじめに
福岡のホームページ制作・SEO対策の株式会社スゴヨクです。
メールフォームによるお問い合わせよりも、ラインでお問い合わせを受けつけたいというご要望は多くあるのではないでしょうか。WEBサイトに「LINEでお問い合わせ」ボタンを設置して、ユーザーのLINEアプリを起動させて、自身のLINE公式アカウントを自動的に表示させたいということはありませんか？また、このLINEアプリ起動時に、あらかじめデフォルトのテキストメッセージを送信できるように設定したり、ユーザーがどのページからお問い合わせボタンを押したかの情報を送れるようにしたいと思ったことはありませんか。
たとえば不動産のサイトであれば、ユーザーが気になっている物件のページから「LINEでお問い合わせ」をタップするだけで、その物件情報をメッセージに含めたLINEアプリのトーク送信画面を起動することが可能です。
→「【CSS】placeholderの文字色やフォントサイズを変更したい！」はこちらから
「LINEでお問い合わせボタン」の設置
LINE URLスキーム
LINEでお問い合わせボタンを設置するには「LINE URLスキーム」を使用します。
ユーザーがLINE URLスキームを使ったURLにアクセスすると、LINEが自動的に起動してURLで指定されたコンテンツが表示されます。
詳細は以下のリンクからご覧いただけます。
LINEの公式ドキュメントはこちら
LINE URLスキームの使い方
LINE URLスキームは「https://line.me/R/」というURLをhref属性に設定することで使用可能です。
ユーザーがこちらのURLをクリックすると、自動的にLINEアプリが起動します。
「https://line.me/R/」という基本のURLに続けてさまざまな値を設定することで、カメラを起動させたり、位置情報の送信画面を開かせたりするということができます。
|
|
//LINE URLスキームを使用してラインを起動する <a href="https://line.me/R/">ラインを起動する</a> |
LINE公式アカウントでお問い合わせを受けたい
LINE公式アカウントとのトーク画面を開く
LINE URLスキームを使用すれば、「LINEでお問い合わせボタン」からLINE公式アカウントのトーク画面を起動させることができます。
先ほどの基本のLINE URLスキーム「https://line.me/R/」につづけて、「oaMessage/公式ラインのアカウントID」を付け加えることで実装可能です。
|
|
//LINE公式アカウントとのトーク画面を開く <a href="https://line.me/R/oaMessage/公式LINEのアカウントID/">LINEでお問い合わせ</a> |
また、トーク画面を開く際にデフォルトのメッセージをあらかじめ設定しておくには、さらに「/?送信したいメッセージ」を加えます。これによって、テキストメッセージがメッセージ入力欄に入力された状態で、LINE公式アカウントとのトーク画面を開くことができます。
|
|
//「送信したいメッセージ」がメッセージ入力欄に入力された状態で、LINE公式アカウントとのトーク画面を開く <a href="https://line.me/R/oaMessage/公式LINEのアカウントID/?送信したいメッセージ">LINEでお問い合わせ</a> |
おまけ
ページ内の情報を取得してデフォルトメッセージ内に含める
先ほどの「/?送信したいメッセージ」部分を変数にして、その変数に取得したい情報を収めることで実装可能です。以下はその一例です。
|
|
$(function() { var $link = $('#lineBtn'); var $name = ''; var $about = ''; var $textContent = ''; $('#lineBtn').click(function(){ $name = "物件名：" + $('.name').text(); $about = "物件管理コード：" + $('.about').text(); // 改行したい場合は改行コード"%0d%0a"を記述する $textContent = "%0d%0a%0d%0a" + $name + "%0d%0a" + $about; // href属性を書き換える $link.attr('href', 'https://line.me/R/oaMessage/公式アカウントID/?' + "空室状況を知りたい" + $textContent + "%0d%0a%0d%0aフルネームをお送りください"); }); }); |
おわりに
以上のような方法で、ユーザーのラインアプリを起動させてLINE公式アカウントとのトーク画面を開き、こちらの指定したテキストのメッセージ送信を行ってもらうことができます。
勉強中の方、HTML・CSS・JavaScript駆け出しの方にすこしでも参考にしていただけたら幸いです
ちょこっとメンターサービス
HP無料診断
【実践マーケティング手法２２選】 無料ダウンロード
助成金・補助金・融資・M＆A等の総合経営支援サービス
「補助金パートナー」
月額定額制で、ホームページやECサイト運用、営業資料・チラシ・DMなどの製作代行から補助金や助成金など資金調達の情報を提供及び申請代行まで一手に支え会社の成長をサポートするコンサルティング型のサービスです。
ワードプレスでSEO対策をするなら【オリテン】
seoで高位置検証済みのオリジナルテンプレート制作
完全オリジナルの自社テンプレートを毎月3社様限定で制作を承っております。
