@ali-zaidi-arrivy/arrivy-live-track-widgets

Introduction

This document describes the usage of Arrivy Live Track Widgets with sample code snippets including available options and functions.

Getting started

Include provided javascript and CSS files on the page where the livetrack widget(s) need to be rendered. Typically CSS file import goes inside the head tag and javascript before the ending tag of the body. Following are the required dependencies and single stylesheet, that needs to be included in case of any widget

<link href="live-track/assets/css/altw.css" rel="stylesheet">

<script src="live-track/assets/js/jquery-3.5.1.min.js"></script>
<script src="live-track/assets/js/altw.bundle.js"></script>
<script src="live-track/assets/js/config.js"></script>
<script src="live-track/assets/js/helpers.js"></script>

After including the above files, include the desired widget specific file or all if need be and create respective HTML element(s) for individual widgets to be rendered in.

<div id="alt-profile"></div>
<script src="live-track/profile/profile.js"></script>

All Arrivy widgets depend on task url_safe_id which can be found from the Live Track API. Initialize the specific widget, ArrivyLiveTrackProfileWidget will render profile information, it can take the following parameters inside the options object while initializing.

let task_url_safe_id = "<paste-task_url_safe_id-here>"
let initial_ALTW_Profile = new ArrivyLiveTrackProfileWidget({
    base_url: 'https://app.arrivy.com',
    task_url_safe_id: task_url_safe_id,
    selector: '#alt-profile',
});

After initializing, call the fetchContent function to render the widget

initial_ALTW_Profile.fetchContent();

Available Widgets

Widget	Description
`ArrivyLiveTrackProfileWidget`	Renders company profile information.
`ArrivyLiveTrackConfirmationWidget`	Renders task confirmation popup if not confirmed already.
`ArrivyLiveTrackRatingWidget`	Renders rating popup after the task is marked complete, and the rating is not provided.
`ArrivyLiveTrackEstimateWidget`	Renders current status of the task including ETA.
`ArrivyLiveTrackRatingViewWidget`	Renders reviews/rating provided by the customer.
`ArrivyLiveTrackEntitiesWidget`	Renders the assigned crew members.
`ArrivyLiveTrackTaskScheduleWidget`	Renders task schedule details.
`ArrivyLiveTrackStatusJournalWidget`	Renders customer journal.
`ArrivyLiveTrackSendingNotesWidget`	Renders notes and attachments sending section.
`ArrivyLiveTrackLocationMapWidget`	Renders google map with live crew location and direction.
`ArrivyLiveTrackItemsWidget`	Renders order items attached with the task.
`ArrivyLiveTrackSafetyMeasuresWidget`	Renders the Safety Instructions set by the company.
`ArrivyLiveTrackFormWidget`	Renders the forms attached with the task.

Widget Parameters

Each widget takes an options object as constructor parameter containing following attributes.

task_url_safe_id (required)
This is the task's unique id, it can be found in task APIs as url_safe_id.
selector (optional)
Selector of the HTML element in which the widget needs to be rendered. If not provided default selector will be used.
base_url(optional)
Base url for all internal API calls, defaults is https://app.arrivy.com, this attribute is useful for adding proxy between Arrivy's APIs.
mark_seen_by_customer(optional)
Boolean if false no seen by customer status will be marked. Default true.

Default Selectors

Widget	Selector
`ArrivyLiveTrackProfileWidget`	`#alt-profile`
`ArrivyLiveTrackConfirmationWidget`	`#alt-confirmation`
`ArrivyLiveTrackRatingWidget`	`#alt-rating`
`ArrivyLiveTrackEstimateWidget`	`#alt-estimate`
`ArrivyLiveTrackRatingViewWidget`	`#alt-rating-view`
`ArrivyLiveTrackEntitiesWidget`	`#alt-entities`
`ArrivyLiveTrackTaskScheduleWidget`	`#alt-task-schedule`
`ArrivyLiveTrackStatusJournalWidget`	`#alt-status-journal`
`ArrivyLiveTrackSendingNotesWidget`	`#alt-sending-notes`
`ArrivyLiveTrackLocationMapWidget`	`#alt-location-map`
`ArrivyLiveTrackItemsWidget`	`#alt-items-table`
`ArrivyLiveTrackSafetyMeasuresWidget`	`#alt-safety-measures`
`ArrivyLiveTrackFormWidget`	`#alt-forms`

Events

Certain javascript document level events are fired for certain actions, that can be listened to.

Available Events

_arrivy_note_sent_success
Fired after a note is successfully sent from inside ArrivyLiveTrackSendingNotesWidget
_arrivy_note_send_fail
Fired in case note sending fails from inside ArrivyLiveTrackSendingNotesWidget, event contains the complete Javascript exception error object.
_arrivy_book_slot_success
Fired after a slot is successfully booked from inside ArrivyLiveTrackConfirmationWidget.
_arrivy_task_confirmed
Fired after customer confirms a task from inside ArrivyLiveTrackConfirmationWidget.
_arrivy_rating_provided
Fired after rating is provided from inside ArrivyLiveTrackRatingWidget.
_arrivy_recommendation_sent
Fired after recommendation is sent from inside ArrivyLiveTrackRatingWidget

Sample Usage

    document.addEventListener('_arrivy_note_send_fail', function (e) {
      console.log(e.content.error);
      console.log('note sending failed...');
    });

Sample Snippets

Profile Widget Sample Code Snippet

<link href="live-track/assets/css/altw.css" rel="stylesheet">

<script src="live-track/assets/js/jquery-3.6.0.min.js"></script>

<script src="live-track/assets/js/altw.js"></script>
<script src="live-track/assets/js/config.js"></script>
<script src="live-track/assets/js/helpers.js"></script>
<script src="live-track/profile/profile.js"></script>

<script type="text/javascript">
let task_url_safe_id = "<paste-task_url_safe_id-here>";
let initial_ALTW_Profile = new ArrivyLiveTrackProfileWidget({
      base_url: 'https://app.arrivy.com',
      task_url_safe_id: task_url_safe_id,
      selector: '#alt-profile',
    });
initial_ALTW_Profile.fetchContent();

</script>


<div id="alt-profile"></div>

Location Map Widget Sample Code Snippet

Map widget require some additional dependence which are included as external scripts

<link href="live-track/assets/css/altw.css" rel="stylesheet">

<script src="live-track/assets/js/jquery-3.6.0.min.js"></script>
<script async src="https://maps.googleapis.com/maps/api/js?key=<paste-google-maps-javascript-key-here>&libraries=geometry"></script>
<script src="https://unpkg.com/@googlemaps/markerwithlabel/dist/index.min.js"></script>

<script src="live-track/assets/js/altw.js"></script>
<script src="live-track/assets/js/config.js"></script>
<script src="live-track/assets/js/helpers.js"></script>
<script src="live-track/location-map/location-map.js"></script>

<script type="text/javascript">
let task_url_safe_id = "<paste-task_url_safe_id-here>";
let initial_ALTW_LocationMap = new ArrivyLiveTrackLocationMapWidget({
      base_url: 'https://app.arrivy.com',
      task_url_safe_id: task_url_safe_id,
      selector: '#alt-location-map',
    });
initial_ALTW_LocationMap.fetchContent();

</script>

<div id="alt-location-map"></div>

Run Sample Code

Download the code, open index.html file in a browser with added query parameter ?url_safe_id=<paste-task_url_safe_id-here>.