Shareloで生成されたコードをコピー＆ペーストするだけで、HTMLサイトにストーリーを埋め込むことができます。

1. コードのコピー

1. まず、ストーリーエディタ画面で「サイトに埋め込む」ボタンをクリックします。

   

2. 次に、タブから埋め込みを選択し、コードをコピーしてください。

   

2. コードをHTMLからJSXに変更する

最初のステップの後、コードをJSXに変換する必要があります。HTMLコードをJSXコードに変換するには、Transform.toolsなどのサイトを利用するとよいでしょう。

3. 埋め込みたい場所にコードを追加する

HTMLコードをJSXコードに変換したら、ストーリーを表示したい場所にコードを追加します。

以下のコードスニペットを利用することもできます。

コードスニペット

interface Props {
	storyId: string;
}

const ShareloInlineEmbed = ({ storyId }: Props) => {
	return (
		<div
		  className="sharelo-inline-widget flex justify-center"
		  data-story-id="H8r0SYmfv6v7P5fJkbHMN"
		  style={{ lineHeight: 0, height: "100%", width: "100%", position: "relative" }}
		>
		  <iframe
		    id={`sharelo-inline-embed-for-${storyId}`}
		    src={`https://story.shareloapp.com/${storyId}/embed`}
		    style={{ border: 0, width: "100%", height: 632, minHeight: 572 }}
		  />
		</div>
	);
}

export default ShareloInlineEmbed