Search...

Generic filters

Exact matches only

Search in title

Search in content

Search in excerpt

Filter by Custom Post Type

Website Integration: Create a login widget and synchronize the login state

Modified November 21, 2018 | Created June 15, 2017 | Jeff Valair

Filed under Website Integration

How to synchronize current authentication status and login to the bookings on your web page.

Prerequisite
» Install a Book Now button or link on your website

Add the following code allows you to maintain login state between your web page and the arms-length online bookings.

<html>
  <body>
    <div class="blueskybooking-authentication-synchronizing">One moment please...</div>

    <div class="blueskybooking-authentication-state-active">Active</div>
    <div class="blueskybooking-authentication-state-inactive">Inactive</div>
    <div class="blueskybooking-authentication-state-description" value="%CONTACT_ID% | %NAME% | %FIRST% %LAST%"></div>

    <span class="blueskybooking-authentication-state-inactive">
      <input type="button" class="blueskybooking-authentication-login" value="Login" /> |
    </span>
    <span class="blueskybooking-authentication-state-active">
      <input type="button" class="blueskybooking-authentication-logout" value="Logout" /> |
      <input type="button" class="blueskybooking-widget-dashboard" value="Dashboard" /> |
    </span>
    
    <input type="radio" id="radLoginMethodContact_ID" name="radLoginMethod" class="blueskybooking-authentication-method blueskybooking-authentication-method-contact_id" value="1" checked="checked" />
    <label for="radLoginMethodContact_ID">Customer #</label><br />

    <input type="radio" id="radLoginMethodEmail" name="radLoginMethod" class="blueskybooking-authentication-method blueskybooking-authentication-method-email" value="2" />
    <label for="radLoginMethodEmail">Email</label><br />

    <input type="radio" id="radLoginMethodAgent" name="radLoginMethod" class="blueskybooking-authentication-method blueskybooking-authentication-method-agent" value="3" />
    <label for="radLoginMethodAgent">Agent</label><br />

    <div class="blueskybooking-authentication-option blueskybooking-authentication-option-contact_id">Contact_ID</div>
    <div class="blueskybooking-authentication-option blueskybooking-authentication-option-email">Email</div>
    <div class="blueskybooking-authentication-option blueskybooking-authentication-option-agent">Agent</div>

    <input type="text" class="blueskybooking-authentication-contact_id" /> Customer #<br />
    <input type="text" class="blueskybooking-authentication-email" /> Email<br />
    <input type="text" class="blueskybooking-authentication-agent-service" /> Agent Service<br />
    <input type="text" class="blueskybooking-authentication-agent-member" /> Agent Member<br />
    <input type="password" class="blueskybooking-authentication-password" /> Password<br />

    <input id="chkAutomatic" type="checkbox" class="blueskybooking-authentication-automatic" checked="checked"/>
    <label for="chkAutomatic">Remember Me</label>
  </body>
</html>

<html>

<body>

<div class="blueskybooking-authentication-synchronizing">One moment please...</div>

<div class="blueskybooking-authentication-state-active">Active</div>

<div class="blueskybooking-authentication-state-inactive">Inactive</div>

<input type="button" class="blueskybooking-authentication-login" value="Login" /> |

</span>

<input type="button" class="blueskybooking-authentication-logout" value="Logout" /> |

<input type="button" class="blueskybooking-widget-dashboard" value="Dashboard" /> |

</span>

<label for="radLoginMethodContact_ID">Customer #</label><br />

<label for="radLoginMethodEmail">Email</label><br />

<label for="radLoginMethodAgent">Agent</label><br />

<div class="blueskybooking-authentication-option blueskybooking-authentication-option-contact_id">Contact_ID</div>

<div class="blueskybooking-authentication-option blueskybooking-authentication-option-email">Email</div>

<div class="blueskybooking-authentication-option blueskybooking-authentication-option-agent">Agent</div>

<input type="text" class="blueskybooking-authentication-contact_id" /> Customer #<br />

<input type="text" class="blueskybooking-authentication-email" /> Email<br />

<input type="text" class="blueskybooking-authentication-agent-service" /> Agent Service<br />

<input type="text" class="blueskybooking-authentication-agent-member" /> Agent Member<br />

<input type="password" class="blueskybooking-authentication-password" /> Password<br />

<label for="chkAutomatic">Remember Me</label>

</body>

</html>

Technical

This include supporting documentation on the login widget.

Synchronization

This can be used to notify users when the authentication process in in process.

Class:
blueskybooking-authentication-synchronizing

State: Active

A section or sections which are displayed when the login state is authenticated and active.

Class:
blueskybooking-authentication-state-active

State: Inactive

A section or sections which are displayed when the login state is inactive.

Class:
blueskybooking-authentication-state-inactive

State: Description

A section which customer and/or agent details can be passed through.

Class:
blueskybooking-authentication-state-description

Parameters:
%CONTACT_ID%
%NAME%
%FIRST% %LAST%

Login

The login button or link which executes the authentication.

Class:
blueskybooking-authentication-login

Logout

The login button or link which signs out of the booking system.

Class:
blueskybooking-authentication-logout

Dashboard

The login button or link which opens the customer dashboard.

Class:
blueskybooking-widget-dashboard

Login Method

Class:
blueskybooking-authentication-method

Options:
blueskybooking-authentication-method-contact_id
blueskybooking-authentication-method-email
blueskybooking-authentication-method-agent

Syntax:
Method={Contact|Contact_ID|Email|Agent}

Login Option

The sections which are displayed, depending on which Login Method is currently selected.

Class:
blueskybooking-authentication-option

Options:
blueskybooking-authentication-option-contact_id
blueskybooking-authentication-option-email
blueskybooking-authentication-option-agent

Field: Customer #

Class:
blueskybooking-authentication-contact_id

Syntax:
Contact_ID={Contact_ID}

Field: Email

Class:
blueskybooking-authentication-email

Syntax:
Email={address}

Field: Agent Service

Class:
blueskybooking-authentication-agent-service

Syntax:
Service={service}

Field: Agent Member

Class:
blueskybooking-authentication-agent-member

Syntax:
Member={member}

Field: Password

Class:
blueskybooking-authentication-password

Syntax:
Password={password}

Field: Automatic

Automatic login on next session, ie. Remember me.

Class:
blueskybooking-authentication-automatic

Syntax:
Automatic={0, 1}