Introduction

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

Getting started

Installation

Node Environment

Add Arrivy Live Track Widgets to your project by executing npm install --save @arrivy/livetrack-widgets

import ArrivyLiveTrackWidgets from '@arrivy/livetrack-widgets';

let initial_ALTW_Profile = new ArrivyLiveTrackWidgets.ArrivyLiveTrackProfileWidget({
                                        task_url_safe_id: '<paste_task_url_safe_id_here>',
                                        selector: '#alt-profile',
                                        mark_seen_by_customer: false
                                    });

Vanilla Javascript

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

<link href="https://unpkg.com/@arrivy/[email protected]/dist/css/style.css" rel="stylesheet">

<script src="https://unpkg.com/@arrivy/[email protected]/dist/bundle.js"></script>


<script>
var initial_ALTW_Profile = new ArrivyLiveTrackWidgets.ArrivyLiveTrackProfileWidget({
                                        task_url_safe_id: '<paste_task_url_safe_id_here>',
                                        selector: '#alt-profile',
                                        mark_seen_by_customer: false
                                    });
</script>

Usage

After including/importing the bundle files, create desired HTML element(s) for individual widgets to be rendered in.

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

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.

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="https://unpkg.com/@arrivy/[email protected]/dist/css/style.css" rel="stylesheet">

<script src="https://unpkg.com/@arrivy/[email protected]/dist/bundle.js"></script>

<script type="text/javascript">
let task_url_safe_id = "<paste_task_url_safe_id_here>";
let initial_ALTW_Profile = new ArrivyLiveTrackWidgets.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 can be external scripts

<link href="https://unpkg.com/@arrivy/[email protected]/dist/css/style.css" rel="stylesheet">


<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="https://unpkg.com/@arrivy/[email protected]/dist/bundle.js"></script>

<script type="text/javascript">
let task_url_safe_id = "<paste_task_url_safe_id_here>";
let initial_ALTW_LocationMap = new ArrivyLiveTrackWidgets.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>