Webviews

TLDR

  1. If you want to jump straight into some template code, go to our Integrations-Guides repository on github.

  2. You can test our template brain that uses a form Webview here.

How to create your own Webview

When the Webview response node is triggered (e.g customer presses Open Form button) we will call your webview url and append needed query parameters.

For example the URL https://webviews.moveo.ai/Company/webview-name would be called like:

https://webviews.moveo.ai/Company/webview-name?channel=facebook&integration_id=1a234567-b8cd-9e0f-1234-g5h6ij78klmn&page_id=1234567890123456&session_id=ab1c23d4-5ef6-7gh8-i9hj-k0lm12345n6o&trigger_node_id=123456a7-bc89-01d2-345e-67f89g012h34&user_id=1234567890123456

Ensuring Origin of the Webview Request

In some cases, the Webview may need to exchange context with the virtual assistant. To ensure that the data is secure in that event, you will need to create a pair of RS256 private/public keys like this:

- openssl genrsa -out private.pem 2048
- openssl rsa -in private.pem -outform PEM -pubout -out public.pem

Then you will have to add the public key to your integration (example for facebook integration):

Creating the webview

Here is a step by step example of creating a webview that uses a Form to collect data from the user and sends it back to Moveo. You can find the code for this Webview in this [link].

  1. From the URL get the following query parameters:

    ParameterDescription
    channel (required)The integration channel e.g Facebook
    integration_id (required)An id used interally for the integrations
    user_id (required)Your unique id in Moveo
    trigger_node_id (optional)The id used to trigger the webview response
  2. Collect data using a Form or in any other way you wish.

  3. Prepare the data:

    • For facebook: page_context = { psid: user_id } for the other integrations page_context = null
    • Then your full data is:
    data = {
    contextFromForm,
    user_id,
    trigger_node_id, // optional
    page_context, // optional
    };
  4. Generate a signature (example in JavaScript)

    import jwt as sign from 'jsonwebtoken';
    const secret = Buffer.from( // your private rsa key
    process.env.PRIVATE_RSA_KEY,
    'base64'
    ).toString();
    const payload = {
    sub: <YOUR_USER_ID>, // Required
    iss: 'www.webviews.moveo.ai', // Required
    };
    // The "expiresIn" option adds an "exp" claim to the payload.
    sign(payload, secret, { algorithm: 'RS256', expiresIn: '4000ms' };
  5. Send the data to Moveo

    Make an HTTPS Post Request to: https://channels.moveo.ai/v1/${channel}/${integration_id}/webview

    with the data

    and these Headers:

    headers: {
    Authorization: `Bearer ${signature}`,
    'X-Moveo-Session-Id': sessionId,
    }
  6. Close the Webview

    const closeWebview = () => {
    if (channel === "facebook") {
    return closeFacebookWebview();
    }
    return window.close();
    };

And you are done!

Additional utilities

For Facebook you could also use the utility methods documented here for example to retrieve the page context or to close the Webview.

Last updated on