@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>.