1. オリジナルフォーム(LIFF)内に別のWEBページを表示させる方法

オリジナルフォーム(LIFF)内に別のWEBページを表示させる方法

2022.08.18 更新
Text=kintsuba
HTML5のiframeという機能を使います。

サンプルページをダウンロードし、ソースコードをご確認下さい。
サンプルページ>
ダウンロード>

※ソースコード確認方法
windows:Ctrl + U
mac  :option + command + U


実装にはオリジナルフォームの編集が必要になります。
編集方法につきましては下記ガイドをご確認下さい。
オリジナルフォームの編集方法はこちら>


(1)対象のフォームのindex.htmlの挿入箇所に下記を記述
※別ページのURLは変更する
<div class="iframe-wrapper">
	<iframe src="別ページのURL" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>


(2)下記スタイルを追加
padding-bottomの値は、別ページのコンテンツの高さに合わせてご変更下さい。
<style>
	.iframe-wrapper {
	position: relative;
	padding-bottom: 94.25%;
	height: 0;
	overflow: hidden;
	}

	.iframe-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}
</style>

ご希望通りのセッティングができましたか?

0人中0人がセッティングができたと言っています。

このマニュアルの作成者は kintsuba です。

こちらのマニュアルで希望のセッティングが出来なかった
際は、下記のどちらかでお問い合わせください。

フリープランの方はこちら
LINE公式アカウント機能拡張プラン、
オートコールセンタープランの方はこちら