ペライチでオフィスの受付を作るやり方

受付ページ制作に必要なもの：
１．タブレットPC※ipadでもAndroidでも、WEBページが表示できるものなら何でも良いです
２．ペライチの最低レギュラープランの契約※HTML埋め込みブロックの利用に必要です
３．受付用のボタン画像（今回は3つです）と遷移先画像

受付用ページ作成方法：
空白ページにHTML埋め込みブロックに以下のコードをコピペして入れつつ、必要な情報を差し替えます。
画像URLは画像アップロード後に右クリックでリンク先画像のURL取得でわかります。
ページの設定はNoindexでお願いします。

左画像サイズ　489px × 455px
右上＆右下画像サイズ　489px × 222px

SlackのWebhookの取得方法はこちらを参照下さい

<div class="button_wrapper">
<div>
<img id ="btn-call1" src=左の画像URL></div>
<div class="right_inner">
<div>
<img id ="btn-call2" src=右上の画像URL>
</div>
<div>
<img id ="btn-call3" src=右下の画像URL></div>
</div>
</div>
<script>
var btn= document.getElementById( "btn-call1" );
btn.addEventListener(
"click",
// イベント後に実行
function(){
const url = 'SlackのWebhookUTL';
const data = {
text: "左のボタンを押したときの投稿内容",
username: "レセプション",
icon_emoji: ":slack_call:"
};
const xml = new XMLHttpRequest();
xml.open("POST", url, false);
xml.setRequestHeader("content-type", "application/x-www-form-urlencoded;charset=UTF-8");
xml.send(`payload=${JSON.stringify(data)}`)
window.location.href = '受付完了画面のURL';	
;	
}
);
var btn= document.getElementById( "btn-call2" );
btn.addEventListener(
"click",
// イベント後に実行
function(){
const url = 'SlackのWebhookUTL';
const data = {
text: "右上のボタンの投稿内容",
username: "レセプション",
icon_emoji: ":slack_call:"
};
const xml = new XMLHttpRequest();
xml.open("POST", url, false);
xml.setRequestHeader("content-type", "application/x-www-form-urlencoded;charset=UTF-8");
xml.send(`payload=${JSON.stringify(data)}`)
window.location.href = '受付完了画面のURL';	
}
);
var btn= document.getElementById( "btn-call3" );
btn.addEventListener(
"click",
// イベント後に実行
function(){
const url = 'SlackのWebhookUTL';
const data = {
text: "右下のボタンの投稿内容",
username: "レセプション",
icon_emoji: ":slack_call:"
};
const xml = new XMLHttpRequest();
xml.open("POST", url, false);
xml.setRequestHeader("content-type", "application/x-www-form-urlencoded;charset=UTF-8");
xml.send(`payload=${JSON.stringify(data)}`)
window.location.href = '受付完了画面のURL';
}
);
</script>
<style>
.button_wrapper{
columns: 2;
margin: 0 auto;
width: 1000px;
}
.right_inner div:first-child {
margin-bottom: 12px
}
</style>

遷移先ページの作り方：基本的には受付ページと同じです。
空白ページにHTML埋め込みブロックに以下のコードをコピペして入れつつ、必要な情報を差し替えます。
画像URLは画像アップロード後に右クリックでリンク先画像のURL取得でわかります。
ページの設定はNoindexでお願いします。
※元のページに戻す時間を変えたい場合はwindow.setTimeout(redirect, 10000)の数字を変更ください。

 <img id ="btn-call" src=遷移先ページの画像URL> 
<script> window.setTimeout(redirect, 10000); function redirect() 
{ window.location.href = '遷移元ページのURL'; } 
</script>

画像サイズ　1050px × 455px

ペライチの受付で使ってる画像をこちらに置いときますね。https://peraichi.com/user_files/download/6f280687-d815-4060-b921-588dee5884b8