Rehook Platform API provides resource oriented URLs to work with your business data. Our API uses JSON for request and response. API errors are returned using standard HTTP response codes.

Introduction

Get UI component API will enable you to fetch the HTML URL of spin the wheel design templates created on rehook dashboard. you can call this API at applicable touch points on your application to fetch and render the spin the wheel UI template within your application interface.

API details

API Endpoint: https://api.rehook.ai/customers/ui/components/{token}

HTTP Method: GET

Prerequisites

1. API Key and Secret Key for your application.
2. If you don't know the API key and secret key, please go to setting module on admin panel to view API details for your application. To know more about application settings, please visit Application setting
3. API key and secret key are auto generated and cannot be changed.
4. Spin the wheel design templates to be created for your application.

Authentication

You need to provide the API key and Secret of your application in every new request as Authorization. Rehook use Basic authentication method to authenticate the API calls.

Parameters

Path parameters

You have to provide token id of your application as path parameter in the API URL. you can get the token Id in setting module of rehook dashboard.

Query parameter

Sample request and response

Path: https://api-dev.rehook-dev.de/customers/ui/components/BpSfqGGModMJ5SmUDMq2u

'BpSfqGGModMJ5SmUDMq2u' is the token in above URL path.

📘

Request body

This API doesn't require request body, you can directly call this API using your application token for a given customer.

Sample request cases:

Sample API responses

{
    "WHEELS": [
        {
            "url": "https://cdn.rehook-dev.de/ui/7a1b067a/wheels/whma_4MrWRoDsrmkxRBLN4nnWq/?token=BpSfqGGModMJ5SmUDMq2u&source_id=KMN@123",
            "template_id": "whma_4MrWRoDsrmkxRBLN4nnWq",
            "status": "AVAILABLE"
        },
        {
            "url": "https://cdn.rehook-dev.de/ui/7a1b067a/wheels/whma_c7hDsKEDONeeWAMUEnwpj/?token=BpSfqGGModMJ5SmUDMq2u&source_id=KMN@123",
            "template_id": "whma_c7hDsKEDONeeWAMUEnwpj",
            "status": "AVAILABLE"
        },
        {
            "url": "https://cdn.rehook-dev.de/ui/7a1b067a/wheels/whma_mjx4ebS2O2LxH4APAwGus/?token=BpSfqGGModMJ5SmUDMq2u&source_id=KMN@123",
            "template_id": "whma_mjx4ebS2O2LxH4APAwGus",
            "status": "NOT AVAILABLE"
        },
        {
            "url": "https://cdn.rehook-dev.de/ui/7a1b067a/wheels/whma_w8oby6nSk7c6MmhI2C7rP/?token=BpSfqGGModMJ5SmUDMq2u&source_id=KMN@123",
            "template_id": "whma_w8oby6nSk7c6MmhI2C7rP",
            "status": "NOT AVAILABLE"
        }
    ],
}

Response fields and it's definition

Followings are the response data and it's definition.

📘

API behaviour

1. This API will return list of spin the wheel template URL for a given application and customer (logged in and non logged in)
2. Each array of object will have a spin URL, spin template id, and spin status
3. Non logged in user - If API is called for non logged in users, spin status of all the spin URL will be inactive, that means, user have to login and win spin chances to spin the wheel
4. Token is mandatory for this API
5. Each spin URL has an unique template_id : If your application has multiple spin wheel template, then template_id can be used as an unique identifier to show the right template on your UI
6. Status of the spin the indicates whether given customer have active spin chances for a returned spin URL or not. value of status will vary for each users depending on the active spin chances they have. Spin CTA will be in disabled state if user doesn't have active spin chances.
7. Spin chances will be decreased after user successfully spun the wheel

Error cases

Integration tasks

Spin the wheel configuration

1. Design spin the wheel templates on rehook dashboard for your application
2. Get token for your application from setting module

Integrate Get UI components API

1. You have to plugin this API wherever you want to show the spin the wheel template within your application UI
2. Returned spin URL to be rendered at applicable touch points on your application UI
3. If you have created multiple spin the wheel templates, use template_id as an unique identifier to show the right template at applicable touch points on your app UI.

Spin the wheel activity

Following post messages will be returned in the API for the below spin wheel activities. you have to consume this messages at your end and take intended actions.

const events = {
          // errors
          MISSING_CREDENTIALS: {
            type: 'error',
            message: 'Missing credential',
          },
          INVALID_SOUCE_ID: {
            type: 'error',
            message: 'Provided source id is invalid',
          },
          INVALID_APP_ID: {
            type: 'error',
            message: 'Provided app id is invalid',
          },
          INVALID_WHEEL_ID: {
            type: 'error',
            message: 'Provided wheel id is invalid',
          },
          INVALID_TOKEN: {
            type: 'error',
            message: 'Provided token is invalid',
          },
          DEFAULT_ERROR: {
            type: 'error',
            message: 'Some unexpected things happened',
          },
          // info
          PAGE_INITIATED: {
            type: 'info',
            message: 'Wheel page was rendered',
          },
          PAGE_LOADED_SUCCESSFULLY: {
            type: 'info',
            message: 'Wheel page was render successfully with all credentials',
          },
          WHEEL_CLOSE: {
            type: 'info',
            message: 'Wheel page close button was pressed',
          },
          WHEEL_SPINNING: {
            type: 'info',
            message: 'Wheel is spinning',
          },
          WHEEL_SPIN_STOP: {
            type: 'info',
            message: 'Wheel has stopped',
          },

          WHEEL_MUTE: {
            type: 'info',
            message: 'Wheel music was muted',
          },
          WHEEL_UNMUTE: {
            type: 'info',
            message: 'Wheel music was unmuted',
          },
          POPUP_CLOSED: {
            type: 'info',
            message: 'Reward popup was closed',
          },
          SPIN_BUTTON_CLICKED: {
            type: 'info',
            message: 'Spin button was clicked',
          },
          TOKEN_FETCHED_SUCCESSFULLY: {
            type: 'info',
            message: 'Token was fetch successfully',
          },
          SPIN_DATA_FETCHED_SUCCESSFULLY: {
            type: 'info',
            message: 'Spin data was fetch successfully',
          },
          POPUP_APPEARED: {
            type: 'info',
            message: 'Reward popup is appeared on the screen',
          },
          POPUP_DISAPPEARED: {
            type: 'info',
            message: 'Reward popup is disappeared from the screen',
          },
        };

WebView activity, Interface and callback - Android application

WebViewActivity:

1. Purpose: Displays web content in a dialog-style WebView (you can use separate activity also). It is responsible for loading and displaying SPIN TEMPLATE URLs passed via intents(or from rehook API), supporting interactive web functionalities directly within the app.
2. Key Components: Includes a WebView for displaying content and implements WebAppCallback to handle actions from the web content.
3. Functionality: Initializes and configures a WebView within a dialog. It enables JavaScript, adds a JavaScript interface, and loads a URL received from an intent. The dialog's dimensions and positions are adjusted based on the device's screen size to optimize visibility and user interaction.
4. WebViewActivity Code:

class WebViewActivity : AppCompatActivity(), WebAppCallback {
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_web_view)
    showWebViewDialog(this)
}

private fun showWebViewDialog(context: Context) {
    val dialog = Dialog(context)
    dialog.setContentView(R.layout.dialog_webview)
    val myWebView: WebView = dialog.findViewById(R.id.webview_dialog)
    myWebView.settings.javaScriptEnabled = true
    myWebView.addJavascriptInterface(WebAppInterface(this), "Android")

    val url = intent.getStringExtra("url")
    myWebView.loadUrl(url ?: "https://example.com")
    dialog.show()
}
}

WebAppInterface:

1. Purpose: Facilitates communication between Android and JavaScript, serving as a bridge for JavaScript running in the WebView to interact with the Android app.
2. Key Methods: postMessage - Receives messages from web content and triggers UI updates or actions via the WebAppCallback.
3. WebAppInterface Code:
   class WebAppInterface(private val callback: WebAppCallback) {

class WebAppInterface(private val callback: WebAppCallback) {
@JavascriptInterface
fun postMessage(message: String) {
    Log.d("WebAppInterface", "Received message: $message")
    try {
        (callback as? Activity)?.runOnUiThread {
            callback.onActionReceived("Received", message)
        }
    } catch (e: Exception) {
        Log.e("WebAppInterface", "Error in message communication", e)
    }
}
}

WebAppCallback Interface:

1. Purpose: Defines an interface to handle actions received from the web content. This interface is crucial for processing actions or messages that are triggered from the WebView's JavaScript context, allowing the Android app to respond accordingly.
2. WebAppCallback Code:

package com.rehook.ai.utils

interface WebAppCallback {  
    fun onActionReceived(action: String, message: String)  
}