Exercise: Create a Client Landing Page

To route messages between the Messages for Business server and new brands, you need to create a link between the new brands Messages for Business ID and the business client ID on your messaging platform using the Client Landing Page URL. When new brands access the landing page, you need to present them with a login screen. The login screen logs the brand into your messaging platform, and then links their Messages for Business ID to a business client ID you associated with their business name and logo in your system.

In this step, you connect your new brands Messages for Business ID to your messaging platform. This linking process allows messages to pass through your platform to the customer support agents.

  1. Create an HTML page, based on the template located in the downloadable files, to allows your business clients link their Messages for Business IDs to your business client ID assigned by your messaging platform.

NOTE The values saved go to your database based on the GET handler for this page, and not the POST handler. Because we're rendering a page visible to the user, GET handles this data.

  1. Ensure the page is HTTPS accessible.

  2. Add handlers to read the following fields from the query strings of the URL, validate the data passed, and save those items in your database: id, name, logo. Below is an example of how the URL passes the information:

    https://<YourSiteHost>/<YourSitePath>?id=<BusinessChatID>&name=<BusinessName>&logo=<LogoURL>

  3. Automate a process to get the Messages for Business ID from the URL and plug it into your messaging platform to allow new brands to test the messaging connectivity.

    NOTE When brands select you as their MSP, Messages for Business directs them to your landing page with a "Connect to <Messaging Service Platform>" link passing the information you need to send and receive messages for their business.

Listing 21_create_landing_page.py

from flask import Flask, render_template, request
    app = Flask(__name__)

    @app.route("/landingPage", methods=['GET'])
    def landingPage():
        return render_template("landingPage.html")

Client Landing Page HTML

Create a /templates folder in the same directory as the HTML file. A sample /templates folder is in the same directory as the other Python files in our API tutorial repository.

The following HTML uses Jinga2 that runs parallel with Flask.

Listing templates/landingPage.html

<html>
    <head>
    <title>Landing Page</title>
    </head>

    <body>
        <div class="box">
            <div class="main">
                <h1> Welcome, {{ request.args.get('name') }}! </h1>
                <p>Sign in to connect your Messages for Business account.</p>
                <img src={{ request.args.get('logo') }}>
                <form class="text-center" method="post" action="/landingPage_csp">
                    <input type="text" name="userName" placeholder="User Name">
                    <input type="password" name="userPassword" placeholder="Password">
                    <input type="hidden" name=“BusinessId" value="{{ request.args.get('id') }}">
                    <input type="hidden" name="BusinessName" value="{{ request.args.get('name') }}">
                    <input type="hidden" name="BusinessLogo" value="{{ request.args.get('logo') }}">
                    <input type="submit" value="Get Started">
                </form>
                <p>Don't have an account? Click <a href=“/#”>here</a> to create one.</p>
                <a href="/#">Forgot password or user name?</a>
            </div>
        </div>
    </body>

    <style>
        body{text-align:center;display:flex;justify-content:center;color:darkgray;background-color:darkgray;}
        .box{padding:2% 10%;max-width:75%;position:fixed;top:20%;border-radius:20px;background-color:white;}
        h1 {color:black;}
        input{box-sizing: border-box;-moz-box-sizing: border-box;width:50%;padding:10px;border-style:unset;border:1px solid darkgray;border-radius:5px;text-align:center;}
        input[type=submit]{color:#007bff;border-color:#007bff;background-color:initial;}
        img{max-width:200px;}
        p a {color:#007bff;text-decoration:none;}
        a {color:gray;}
    </style>
</html>

Test Your Client Landing Page

To test your "Connect to <Customer Service Platform>" link, append the Messages for Business ID, name, and logo to the end of your landing page URL similar to the following:

https://<your-domain-here>/landingPage?id=a884eddf-b0ad-4be4-9c0e-071531638768&name=Connect%20Business%20Chat%20Account&logo=https://register.apple.com/assets/images/icon/apps/MessagesIcon.png

NOTE The "Connect to Customer Service Platform" link doesn't show for private MSPs.

Exercise: Publish Your Client Landing Page

In this step, you submit your company's Client Landing Page to Apple Business Register which publishes it to any new brands of your messaging platform.

  1. Log into your company account in Apple Business Register.

  2. Find "Messaging Service Providers" under Connected Services and click the "Customer Service Platforms" selection.

    NOTE If you do not see "Messaging Service Providers" here, our system may not consider your company as an MSP. For more information on how to correct this, contact your Apple Business Register support representative.

  3. Find your main Commercial MSP along the left navigation panel, and click it.

  4. Find the "Server Configuration" Section, and then find the "Client Landing Page URL" field under this section.

    NOTE If you do not see a "Client Landing Page URL" on any of your MSPs, your company may not be have a Commercial status MSP account yet. Contact your Apple Business Register support representative.

  5. Click Edit for the section and provide the landing page URL in the field indicated.

  6. Click Save.

  7. Click Submit located in the lower right corner to publish your changes to Apple Business Register.