When you have multiple locations servicing customers in different areas, we can use a "router" to determine which Scheduler to surface to your customer based on a zip code prompt.

Step 1: Install Schedule Engine Widget

Follow the Schedule Engine Installation instructions to install the Schedule Engine script. 

Please follow Step 1 on the document linked above, then return to this document to complete the Router installation process.


Step 2: Install the Schedule Engine Router Code

  1. Place the following code in the <head> section of your website.

<link href="https://router.scheduleengine.net/common/v2/se_inc.css" rel="stylesheet" type="text/css" media="all">


  1. Place the following code in the <body> section of your website.

<script type="text/javascript" src="https://router.scheduleengine.net/common/v2/se_inc.js"></script>


  1. ALSO place the following code in the <body> section of your website:


<script type="text/javascript" 

src="https://router.scheduleengine.net/definitions/ROUTERKEY/se_inc_def.js">

</script>

<script>

ScheduleEngineRouter.modal = true;

ScheduleEngineRouter.logoUrl = '';

</script>


NOTE: Schedule Engine will provide the specific value to put in the ROUTER-KEY value.

Step 3: Code the button/link to Launch the Router

Decide what link, button, or other element will open the Schedule Engine Router.

Instead of using the ScheduleEngine.show() method to open the Schedule Engine Widget, you will use ScheduleEngineRouter.show() to open the Router.


<button

  type="button"

  onclick="ScheduleEngineRouter.show()">

  Book Now!

</button>


The following parameters may be passed into the .show() method.

  • Modal - should the router appear as a focused modal or just a popup?  Some of the additional parameters below only apply to modal=true.  Default = false

  • logoURL - the URL of the logo.  Default = "logo.png"

  • headerText: the text of the modal header. Default = "Let's Get Started"

  • buttonText: the text of the button.  Default = "Get Started"

  • errorText: the text of the error message when a service is not available in a specific zip.  Default = "We do not provide service in this area."

  • zipLabel: the text of the label above the zip code field.  Default = "Enter your Zip Code"

  • servicesLabel: the text of the label above the services selection field.  Default = "Choose your service"

  • primaryColor: the hex value color of the header bar and border.  Default = "#10446f"

  • headerTextColor: the hex value color of the header bar text.  Default = "#ffffff"

  • errorColor: the hex value color of the error message.  Default = "#bb0707"

  • codeLength: the number of characters used to search postal/zip codes.  Default = 5


NOTE: You may also pass normal Schedule Engine parameters


SAMPLE HTML PAGE

<!DOCTYPE html>

<html>

 

<head>

    <style>

        body {

            background: url("site.png") center top / 100% no-repeat;

        }

    </style>

 

    <!-- SCHEDULE ENGINE/ROUTER CSS CODE-->

    <!-- The HREF should be set to the router CSS location provided to you by Schedule Engine -->

    <link href="se_inc.css" rel="stylesheet" type="text/css" media="all">

    <!-- END SCHEDULE ENGINE/ROUTER CSS CODE-->

 

</head>

 

<body>

    <!-- SCHEDULE ENGINE ROUTER CODE -->

    <!-- The SRC should be set to the router script location provided to you by Schedule Engine -->

    <script type="text/javascript" src="se_inc.js"></script>

    <!-- END SCHEDULE ENGINE ROUTER CODE -->

 

    <!-- SCHEDULE ENGINE/ROUTER CODE-->

    <script data-api-key="{API KEY PROVIDED BY SCHEDULE ENGINE" id="se-widget-embed" type="text/javascript" src="https://embed.scheduleengine.net/schedule-engine-v2.js"></script>

    <!-- END SCHEDULE ENGINE/ROUTER CODE-->

 

    <!-- SAMPLE CODE-->

    <div onclick="ScheduleEngineRouter.show({

        modal: false,

        logoUrl: '',

        headerText: '',

        buttonText: '',

        errorText: '',

        zipLabel: '',

        servicesLabel: '', 

        primaryColor:'',

        headerTextColor: '',

        errorColor: '',

        campaign: ''

        })" style="position: absolute;height:100%;width:100%;cursor:pointer;"></div>

    <!-- END SAMPLE CODE-->

 

</body>

 

</html>