Embedding MLA

Notes

MyPage authentication provider must be enabled for campaigns to work with MLA.
The Crowdmanager Token needs to be obtained and passed to the MLA. For more information about cmToken, refer to More about cmToken
You can fetch CampaignApps configured in Context to be displayed on your page.

Dictionary

Name	Long Name	Description
MLA	Micro LiveApp	Micro version of campaign app
cmToken	CrowdManager Token	MyPage Authorization JWT token

Embed on Web Page

To embed the campaign on your web page, copy the script below and place it in your page's markup where you want the campaign to appear. Since MLA requires the user's authentication token to initialize, you need to call the initialization manually by executing window.FD_EMBEDDING.initialize(cmToken);

<!-- Place this script link code in the <head> section of your web page once -->
<script class="fd-mla-script" src="https://campaign.fandrive.io/mla/assets/fd-embedding.js"></script>

<!-- Place this div element wherever you want campaign to show for every campaign you want embedded (these are unique elements) -->
<div class="fd-mla" data-fd-guid="{campaignAppGuid}" data-fd-language="en"></div>

<!-- Execute once in code passing correct auth token value replacing [ctoken] below -->
window.FD_EMBEDDING.initialize(cmtoken);

Embed in Mobile App

You can embed campaign in your mobile app with a link, Pass the token obtained per-visitor Crowdmanager Token using PublicApi, as a query param:

https://campaign.fandrive.io/privateapi/campaignapplive/mla/{campaignGuid}?language=en#{cmToken}

Web Application sample

<!DOCTYPE HTML>
<html>
    <head>
        <script class="fd-mla-script" src="https://campaign.fandrive.io/mla/assets/fd-embedding.js"></script>
    </head>
    <body>
        My MLA will appear below:
        <div class="fd-mla" data-fd-guid="{campaignAppGuid}" data-fd-language="en"></div>
        <script>
            var token = "cmToken";
            window.FD_EMBEDDING.initialize(token);
        </script>
    <body>
</html>

Please make sure that u set the correct Campaign Guid as a value fur data-fd-guid tag attribute.

Mobile Application sample - Kotlin + Android

MainActivity.kt

// Replace with your actual values
private const val ORGANIZATION_ID = "1201"
private const val API_KEY = "aaabbbccc111222333"
private const val PROVIDER_TOKEN = "abc123"
private const val PROVIDER = "SportsAlliance"
private const val LANGUAGE = "en"
private const val CAMPAIGN_GUID = "b5a9cbc6-5dcc-4bca-a9a8-e462539b514e"

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            val retrofit = Retrofit.Builder()
                .baseUrl("https://api.crowdmanager.io/v2/$ORGANIZATION_ID/")
                .build()
            val cmTokenService = retrofit.create(CMTokenService::class.java)

            // Make an asynchronous HTTP request to fetch a CM token
            val call = cmTokenService.getCMToken("Basic $API_KEY", PROVIDER_TOKEN, PROVIDER)

            call.enqueue(object : Callback<ResponseBody> {
                @SuppressLint("SetJavaScriptEnabled")
                override fun onResponse(
                    call: Call<ResponseBody>,
                    response: Response<ResponseBody>
                ) {
                    if (!response.isSuccessful) {
                        Log.d("ServerResponse", response.message())
                        return
                    }

                    var cmToken = response.body()?.string()
                    if (cmToken === null) {
                        return
                    }

                    // Remove double quotes from the CM token, if present
                    cmToken = cmToken.replace("\"", "")

                    // Create WebView to embedd web app
                    val myWebView = WebView(applicationContext)
                    myWebView.webViewClient = WebViewClient()
                    myWebView.settings.javaScriptEnabled = true
                    setContentView(myWebView)

                    // Load MicroLiveApp
                    myWebView.loadUrl("https://campaign.fandrive.io/privateapi/campaignapplive/mla/$CAMPAIGN_GUID?language=$LANGUAGE#$cmToken")
                }

                override fun onFailure(call: Call<ResponseBody>, t: Throwable) {
                    Log.d("Failure", "${t.message}")
                }
            })

        }
    }
}

CMTokenService.kt

interface CMTokenService {

    @GET("customerinsights/cmtoken")
    fun getCMToken(
        @Header("Authorization") auth: String,
        @Query("token") token: String,
        @Query("provider") provider: String,
    ): Call<ResponseBody>
}