Devera Widget Android Integration

Java

To integrate the Devera Widget via microfront using Java you need to do this:

  1. Add Permissions in AndroidManifest XML:

    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools">
  <uses-permission android:name="android.permission.INTERNET" />
  <!-- .... -->
</manifest>

  2. Add WebView in the layout XML:

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  tools:context=".MainActivity">
<WebView
  android:id="@+id/webview"
  android:layout_width="match_parent"
  android:layout_height="match_parent" />
</LinearLayout>

  3. Add in your code the webview with the html adapted to the widget webview filling in the custom variables:

    import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.app.ActivityCompat;
import androidx.core.content.ContextCompat;
import android.Manifest;
import android.content.pm.PackageManager;
import java.util.Arrays;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        WebView webView = findViewById(R.id.webview);
        webView.setWebViewClient(new WebViewClient());

        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setDomStorageEnabled(true);

        String productId = "<your-product-id>";
        String token = "<your-token>";
        String clientId = "<your-client-id>";
        String language = "" //  By default it chooses the system language, but you can select is for Spanish, en for English and de for German.
        String mainColor = "#4b858e"; // You can change the default values
        String mainActive = "#2c4e54";
        String mainDisabled = "#9db8bc";
        String secondary = "#a3d5cd";
        String secondaryDark = "#9ac6bf";
        String secondaryMiddle = "#c8e7e2";
        String secondaryLight = "#e8f6f3";
        String secondarySuperDark = "#7baaa3";
        String font = "'Montserrat', sans-serif";
        String maxWidth = "420px";
        String height = "500px";

        String htmlData = String.format("<html><head><style>:root { --devera-main: %s; --devera-mainActive: %s; --devera-mainDisabled: %s; --devera-secondary: %s; --devera-secondaryDark: %s; --devera-secondaryMiddle: %s; --devera-secondaryLight: %s; --devera-secondarySuperDark: %s; --devera-font: %s; --devera-microMaxWidth: %s; --devera-microHeight: %s; }</style></head><body><devera-widget product-id='%s' client-id='%s' token='%s' language='%s'></devera-widget><script src='https://widget.devera.ai/widget.umd.js'></script></body></html>", mainColor, mainActive, mainDisabled, secondary, secondaryDark, secondaryMiddle, secondaryLight, secondarySuperDark, font, maxWidth, height, productId, clientId, token, language);

        webView.loadDataWithBaseURL("https://widget.devera.ai/", htmlData, "text/html", "UTF-8", null);

    }
}

Remember to change the values of your-token to your token, your-client-id to your client id and your-product-id with the id of the product that you gave us to relate it to.

Kotlin

To integrate the Devera Widget via microfront using Kotlin you need to do this:

  1. Add Permissions in AndroidManifest XML:

    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools">
  <uses-permission android:name="android.permission.INTERNET" />
  <!-- .... -->
</manifest>

  2. Add WebView in the layout XML:

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  tools:context=".MainActivity">
<WebView
  android:id="@+id/webview"
  android:layout_width="match_parent"
  android:layout_height="match_parent" ></WebView>
</LinearLayout>

  3. Add in your code the webview with the html adapted to the widget webview filling in the custom variables:

      import android.os.Bundle
  import androidx.activity.ComponentActivity
  import android.webkit.WebView
  import android.webkit.WebViewClient
  import android.webkit.WebChromeClient
  import androidx.core.app.ActivityCompat
  import androidx.core.content.ContextCompat
  import android.content.pm.PackageManager

  class MainActivity : AppCompatActivity() {

      override fun onCreate(savedInstanceState: Bundle?) {
          super.onCreate(savedInstanceState)
          setContentView(R.layout.activity_main)

          val webView: WebView = findViewById(R.id.webview)
          webView.settings.javaScriptEnabled = true
          webView.settings.domStorageEnabled = true
          webView.webViewClient = WebViewClient()

          val productId = "<your-product-id>"
          val token = "<your-token>"
          val clientId = "<your-client-id>"
          val language = "" /* By default it chooses the system language, but you can select is for Spanish, en for English and de for German. */
          val mainColor = "#4b858e" /* You can change the default values */
          val mainActive = "#2c4e54"
          val mainDisabled = "#9db8bc"
          val secondary = "#a3d5cd"
          val secondaryDark = "#9ac6bf"
          val secondaryMiddle = "#c8e7e2"
          val secondaryLight = "#e8f6f3"
          val secondarySuperDark = "#7baaa3"
          val font = "'Montserrat', sans-serif"
          val maxWidth = "420px"
          val height = "500px"

          val htmlData = """
              <html>
                <head>
                <style>
                  :root {
                    --devera-main: $mainColor;
                    --devera-mainActive: $mainActive;
                    --devera-mainDisabled: $mainDisabled;
                    --devera-secondary: $secondary;
                    --devera-secondaryDark: $secondaryDark;
                    --devera-secondaryMiddle: $secondaryMiddle;
                    --devera-secondaryLight: $secondaryLight;
                    --devera-secondarySuperDark: $secondarySuperDark;
                    --devera-font: $font;
                    --devera-microMaxWidth: $maxWidth;
                    --devera-microHeight: $height;
                  }
                </style>
              </head>
              <body>
              <devera-widget
                product-id="$productId"
                client-id="$clientId"
                token="$token"
                language="$language"
              ></devera-widget>
              <script src="https://widget.devera.ai/widget.umd.js"></script>
            </body>
          </html>
          """

          webView.loadDataWithBaseURL("https://widget.devera.ai", htmlData, "text/html", "UTF-8", null)
      }
  }

Remember to change the values of your-token to your token, your-client-id to your client id and your-product-id with the id of the product that you gave us to relate it to.