Contents x
    Integrating shortform preview (PIP Mode)
      • Print
      Contents

      Integrating shortform preview (PIP Mode)

        • Print
        Article summary

        Shortform videos can be embedded in product detail pages as PIP-style video banners.

        Quick integration

        Initialization

        Here are examples of how you can initialize the Shoplive Shortform without user authentication, simple authentication, and JWT token authentication. You can install with desired auth type of initialization code in common layout. (head area, etc.)

        • Detailed information can be found in User Authentication.

        Access Key

        Access key and secret key can be obtained from Shoplive representative (ask@shoplive.com).

        <script type="text/javascript" src="https://static.shoplive.cloud/shoplive-shortform.js"></script>
<script>cloud.shoplive.initShortform({ accessKey: 'YOUR ACCESS KEY HERE' });</script>

<!-- OR -->

//Simple auth
<script type="text/javascript" src="https://static.shoplive.cloud/shoplive-shortform.js"></script>
<script>
  cloud.shoplive.initShortform({ accessKey: 'YOUR ACCESS KEY HERE' });
  cloud.shoplive.setUserObject({userId: "USER_ID", userName: "USER_NAME"});
</script>

<!-- OR -->

//JWT auth
<script type="text/javascript" src="https://static.shoplive.cloud/shoplive-shortform.js"></script>
<script>
  cloud.shoplive.initShortform({ accessKey: 'YOUR ACCESS KEY HERE' });
  cloud.shoplive.setUserJWT("USER_JWT");
</script>

        Insert the Shortform Preview code

        Install the below code. (e.g. Common layout of product detail page)

        <script defer>
  cloud.shoplive.showShortformPreview();
</script>

        The function analyzes the URL called and displays related Shortform videos as PIP-style video banners. (If the product cannot be inferred from the URL, the video banner will not be displayed.)

        Check the product URL and actual landing URL

        If the product URL and the actual landing page URL are different, Shortform Preview may not be displayed.

        If you have any problems displaying Shortform Preview, contact to the Shoplive representative at ask@shoplive.cloud.


        Advanced integration

        Shortform Preview Based on Group

        Display shortform content associated with a specific shortform group ID.

        <script defer>
  cloud.shoplive.showShortformPreview({
    shortformCollectionId: "SHORTFORM_COLLECTION_ID"
  });
</script>

        Shortform Preview Based on SKU

        Display shortform content associated with a specific SKU.

        <script defer>
  cloud.shoplive.showShortformPreview({
    skus: ["SKU"]
  });
</script>

        Tag-Based shortform Preview

        Only display shortform videos that contain a specific tag (5 tags maximum) as PIP-style video banners

        <script defer>
  cloud.shoplive.showShortformPreview({
    tags: ["YOUR_TAG1", "YOUR_TAG2"]
  });
</script>

        When configuring related shortform with multiple tags, you can add the tagSearchOperator="AND" option to configure a condition that includes all of the tags (AND condition)

        <script defer>
  cloud.shoplive.showShortformPreview({
    tags: ["YOUR_TAG1", "YOUR_TAG2"],
    tagSearchOperator: "AND"
  });
</script>

        Brand-based shortform preview

        Only display shortform videos that contain a specific brand(5 brands maximum) as PIP-style video banners

        <script defer>
  cloud.shoplive.showShortformPreview({
    brands: ["BRAND_IDENTIFIER1", "BRAND_IDENTIFIER2"]
  });
</script>

        Shortform Preview with Combined Parameters

        Set multiple condition values to use parameters in combination.

        <script defer>
  cloud.shoplive.showShortformPreview({
    shortformCollectionId: "SHORTFORM_COLLECTION_ID",
    tags: ["TAG1", "TAG2"],
    skus: ["SKU1", "SKU2"]
  });
</script>

        Validity period of closing the shotform preview

        Define the validity period for the close button on the shortform preview

        When the user closes the shortform preview, define the duration during which the shortform preview will not be shown upon refresh. If no specific settings are configured, once the preview is closed, it will remain closed for the duration of that session. (A new session begins when the browser is closed or accessed from a new tab)

        • The preview will not be shown to users who used the close button for the defined duration in minutes, and it will be displayed again after this time elapses.

        • This remains valid even if the browser is restarted or tabs are switched.

        • If closePolicyExpiry is not defined, users who used the close button will not see the preview upon refresh for the duration of the browser session. (Unlike when closePolicyExpiry is used, the preview will be shown again in a new tab)

        Not to show the preview for one day to users who have closed the shortform preview 

        <script defer>
  cloud.shoplive.showShortformPreview({
     closePolicyExpiry: 1440 //Define that the shortform preview will not open for 1440 minutes (1 day).
  });
</script>

        To show the preview upon refresh to users who have closed the shortform preview 

        <script defer>
  cloud.shoplive.showShortformPreview({
     closePolicyExpiry: 0 //The shortform preview will not open for 0 minutes, meaning it can be shown again upon refresh.
  });
</script>

        What's Next