Shareloで生成されたコードをコピー＆ペーストするだけで、あなたのShopify ECサイトにフローティングウィジェットを追加することができます。

1. コードのコピー

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

    Screen_Shot_2022-09-06_at_9_33_41.png

  2. 次に、タブメニューから「フロートウィジット」を選択し、コードをコピーしてください。

    Screen Shot 2022-09-06 at 9.43.37.png

2. Shopifyのhead(<head></head>)内にコードを追加してください。

  1. Shopifyダッシュボードのテーマを開きます。

  2. オンラインストアをクリックします。

    image30.png

  3. その他のテーマアクションからサブメニューを開き、「コードを編集」選択します。

    image31.png

  4. theme.liquid を開きます。

    image32.png

  5. テキストボックスから<head></head>内にコードを挿入します。

    image33.png

  6. 保存します。

    image34.png

3. 上級編：JavaScriptで表示タイミングを制御する

  1. ShareloSDKを使うと、ウィジェットの表示タイミングを動的に制御することができます。

CSSとWidgetスクリプトをhead内に追加します。


<link href="[<https://story.shareloapp.com/widget.css>](<https://story.shareloapp.com/widget.css>)" rel="stylesheet">を追加します。
<script src="[<https://story.shareloapp.com/widget.js>](<https://story.shareloapp.com/widget.js>)" type="text/javascript" async ></script>を追加します
  1. initFloatingWidget関数を自分のタイミングで呼び出す

widget.js のコードが読み込まれたら、window.ShareloSDK.initFloatingWidget を呼び出して、ウィジェットを表示させます。以下はサンプルコードです。

```tsx
const showWidget = (storyId: string) => {
  window.ShareloSDK.initFloatingWidget({ 
    storyId,
    size: "regular", 
    view: "auto",
    toggleType: "circle",
    toggleSize: "medium",
    toggleView: "auto",
    toggleMessage: "Hi there✋" 
  });
}
```