Embed in Mobile

Using the Trip Element in a Mobile Application (Android)

To load the Trip Element within a mobile application, we recommend using WebView.

This page demonstrates loading the Trip Element in an Android application, using the WebView Android Development Kit for Java.

Step 1: Set up the Source HTML file

First, you can create a standard HTML file that loads the Trip Element just like any other webpage. Here, you can define your elementConfig and pre-configure the element with the desired properties.

<html>
    <head>

<!--
    Include the sherpa° SDK by adding the script tag to the head of your HTML file and include your personalized APP_ID.
    Note: You will receive a unique APP_ID during onboarding.
-->
        <script src="https://sdk-sandbox.joinsherpa.io/widget.js?appId={{APP-ID}}" defer></script>

    </head>
    <body>

<!-- Place an empty <div> element on your site to act as the mount point. -->
        <div id='sherpa-trip-element'></div>

        <script type='text/javascript'>

// Set up the element configuration
            const elementConfig = {

placement: 'discovery',
language: 'en-US',
travellers: [{
    nationality: 'CAN',
    vaccinations: [{
        type: 'COVID_19',
        status: 'FULLY_VACCINATED'
    }]
}]

            };

// Filter for skdLoaded event then call element
            function onSherpaEvent(event) {
                if (event.type === 'sdkLoaded') {

// Sherpa SDK is ready, create and mount new element
                    $sherpa.V2.createElement('trip', elementConfig).mount('#sherpa-trip-element');

                }
            }

        </script>

    </body>
</html>

Step 2: Setup WebView and Call the HTML file

Next, set up WebView in your development environment. Here, you will call the HTML file that you created in Step 1 in order to display the Trip Element within your mobile app (Line 35)

package com.example.loadteinwebview;

import androidx.appcompat.app.AppCompatActivity;

import android.annotation.SuppressLint;
import android.os.Bundle;

// Webkit WebView classes
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {

// Instantiate WebView object
    WebView webView;

// Hide warning for enabling JS in WebView and possibility of XSS vulnerabilities
    @SuppressLint("SetJavaScriptEnabled")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = findViewById(R.id.myWebView);

// Configure webView settings
        WebSettings webSettings = webView.getSettings();
        webSettings.setBuiltInZoomControls(true);
        webSettings.setJavaScriptEnabled(true);
        webSettings.setAllowFileAccessFromFileURLs(true);

        webView.setWebViewClient(new Callback());

// Webpage to load in WebView
        webView.loadUrl("file:///android_asset/trip-element-test.html");
    }

    private static class Callback extends WebViewClient {
        @Override
// Give the host application a chance to take control when a URL is about
// to be loaded in the current WebView.
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            return false;
        }
    }

}

Step 3: Sample Output

You should now have the Trip Element loaded within your mobile app. Sample output is provided below.