1. Introduction

The page that is displayed when the SauceClip image address is accessed. Generally, you can use it as it is in the browser.

A guide to events provided by the SauceClip Player.

2-1. Interworking Method (Basic -SauceClip Player Landing)

If it's pre-planning, use the SauceClip function as it is.

For other information, please refer to the example of the contents of the JSON field below and [ChannelTalk] (https://zppj8.channel.io/home) or [person-in-charge mail] (mailto:[email protected] ) for more information.

• SauceClip entry
• There is no default behavior.
• Share
• SNS (ex. kakao, facebook) sharing is not supported, only address copy is available.
• Close SauceClip URL
• The default behavior is history.back().

⭐️ stage, apply prod environment settings - For questions, contact ChannelTalk or mail to CSM .

{
    /* Close button (is not history back) */
    "close": {
        /* history settings */                
        /* Type "href" | "replace" defaultValue "href" href= "history",replace="replace" */
        "history": "href",
        /* mobile url */
        /* Type string | null defaultValue null*/
        /* ex) "https://space.sauceflex.com"*/
        "mobile": null,
        /* PC url */
        /* Type string | null */
        /* ex) "https://space.sauceflex.com"*/
        "pc": null,
        /* webview scheme call */
        /* Type string | null */
        /* ex) "webivew":"sauceclipapp://close" */
        "webview": null
    },
    /* theme settings */
    /* Type RGB color */
    /* ex) "222,46,95*/
    "theme": {
        "bgColor": null
    },
    /* shop info use or not (logo,titie,etc..) */
    /* Type true || false // default true */
    /* ex) true */
    "store": {
        "isStore": true
    }
}

//  used example
{
    "close": {
        "history": "href",
        "mobile": "https://space.sauceflex.com",
        "pc": "https://space.sauceflex.com",
        "webview": null
    },
    "theme": {
        "bgColor": "222,46,95"
    },
    "store": {
        "isStore": true
    }
}

📘

<https://player.sauceclip.com/player?clipId={sauceclipID}&partnerId={partnerID}>

Notes for interlocking players in WebView

• Please make sure to set up the SafeArea area to prevent player screen clipping on iOS X and later devices.
• Please use the code below if you want the Android Webview to play the video without displaying the play. (The guide is carried out by the customer's AOS app development team.)
• override fun getDefaultVideoPoster(): Bitmap? { { { return Bitmap.createBitmap(10,10, Bitmap.Config.ARGB_8888) }

2-2. Interworking method (Iframe)

STEP1. Whether to use the function ⭐ ️ stage, prod environment setting - For more information,[[channel talk](<https://zppj8.channel.io/home)] or mail to CSM].

{
    /* close button setting */
    "close": {
        "history": "href",
        "mobile": "https://space.sauceflex.com",
        "pc": "https://space.sauceflex.com",
        "webview": null
    },
    /* broadcast theme settings */
    "theme": {
        "bgColor": "222,46,95"
    },
    /* shop info use or not */
    "store": {
        "isStore": true
    }
}

STEP 2. Use 'iframe' to add a broadcast page to the page.

<!-- Broadcast Address -->
<iframe src="https://player.sauceclip.com/player?clipId={sauceclipId}&amp;partnerId={partnerId}&gt;"&gt;</iframe>
<!-- To use an external inflow code, you must pass the requested parameters before drawing an iframe. You must forward the value of fc among the queryString keys called to the parent page. -->
<!-- example -->
<iframe src="https://player.sauceclip.com/player?clipId={sauceclipId}&amp;partnerId={partnerId}&amp;fc=value"></iframe>

STEP 3. Receive 'message' events in the JavaScript window object and handle them properly.

window.addEventListener(
"message",
   function(e) {
  // Take care of it here
   console.log(e.data);
}, }, false
);

STEP 4. The message is delivered to the JSON type via the 'data' of the event. Each event is as follows.

• SauceClip Entry - Invoke automatically when entering a page

  • json

    // event.data
    {
        key: 'sauceclipEnter',
        params: null
    }
    

• SauceClip Exit (is broadcast Exit)

  • json

    // event.data
    {
        key: 'sauceclipMoveExit',
        params: null
    }
    

• product click

  • json

    // event.data
    {
        key: 'sauceclipMoveProduct',
        params: {
            linkUrl: String | null, // product url
            clipIdx: String // sauceClip url index
        }
    }
    

• share url

  • json

    // event.data
    {
        key: 'sauceclipOnShare',
        params: {
            linkUrl: String // sauceClip url 
        }
    }
    

2-3. Interworking method (Webview)

Bridge & Message

The message will be sent to the bridge as shown below. Each message is delivered with the JSON object stringed.

• sauclipEnter (Void) - automatically called when entering a page
• sauceclipMoveExit(Void)
• sauceclipMoveProduct(message: String)
  • json

    // Stringified JSON
    {
        linkUrl: String | null, 
        clipIdx: String     
    }
    

• sauceclipOnShare(message: String)
  • json

    // Stringified JSON
    {
        linkUrl: String 
    }
    

Android

On Android, if any of the bridges with the name "sauclip" exist, the message will be forwarded and the default behavior will be cancelled.

import android.os.Handler
import android.webkit.JavascriptInterface
import android.widget.Toast
 
class AndroidBridge(private val activity: MainActivity) {
    private val handler = Handler()
 
    @JavascriptInterface
    fun sauceclipEnter() {
        handler.post {
            Toast.makeText(activity, "sauceclipEnter", Toast.LENGTH_SHORT).show()
        }
    }
 
    @JavascriptInterface
    fun sauceclipMoveExit() {
        handler.post {
            Toast.makeText(activity, "sauceclipMoveExit", Toast.LENGTH_SHORT).show()
        }
    }
 
    @JavascriptInterface
    fun sauceclipMoveProduct(message: String) {
        handler.post {
            Toast.makeText(activity, "sauceclipMoveProduct \\n $message", Toast.LENGTH_SHORT).show()
        }
    }
 
    @JavascriptInterface
    fun sauceclipOnShare(message: String) {
        handler.post {
            Toast.makeText(activity, "sauceclipOnShare \\n $message", Toast.LENGTH_SHORT).show()
        }
    }
 
}

iOS

extension ViewController: WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController,
                                    didReceive message: WKScriptMessage) {
        switch (message.name) {
            case "sauceclipEnter":
                print("sauceclipEnter")
                break
 
            case "sauceclipMoveExit":
                print("sauceclipMoveExit")
                break
 
            case "sauceclipMoveProduct":
                print("sauceclipMoveProduct")
                print(message.body)
                break
 
            case "sauceclipOnShare":
                print("sauceclipOnShare")
                print(message.body)
                break
 
            default:
                print("message.name \\(message.name) not handled.")
        }
    }
}

🚦 This document contains trade secrets and industrial technologies subject to protection under the Act on Unfair Competition Prevention and Trade Secrets Protection.

🚦Unauthorized disclosure, distribution, copying, or use of all or part of the information contained herein is strictly prohibited.