Customizing the Experience

Launching

Pv2 offers a several ways to communicate with a visitor.

• Chat
• SMS
• ActivTarget (form submission)

If you want, you can control when these communication options are presented to the visitor. Instead of relying on ActivEngage's CTAs you can create your own and launch chat or text when visitor interacts with them.

Using Attributes to hook up custom elements

The preferred method of doing creating your own CTA is through a set of predefined attributes that you can add to the page. Currently there are two attributes for creating custom CTAs.

• chat-launch
• sms-launch

To launch chat for example you would use the chat-launch attribute. Here's an example:

<div chat-launch="button">
    [PLACE_YOUR_IMAGE/HTML_HERE]
</div>

Likewise to launch sms you would use the sms-launch attribute.

<div sms-launch="button">
    [PLACE_YOUR_IMAGE/HTML_HERE]
</div>

When Pv2 loads it looks for all the elements on the page with this attribute and binds to the onclick handler. When clicked by the visitor this element will launch chat. The HTML inside of this div can be any valid HTML.

The attribute value in this case would be sent back to ActivEngage when clicked so we can report on where chats are coming from, so it's a best practice to make these unique.

A complete example of this would be:

<div chat-launch="button">
  <button type="button" class="btn btn-success">Chat Now</button>
</div>

Using JavaScript to Launch Chat

Alternatively you can use the JavaScript SDK to launch chat. In that case you would need to create an HTML and handle the onclick yourself. Then call ActivEngage.launchChat();. See also the section below about passing data to see specificaly what data can be passed in this call.

Other things you can launch

As mentioned previously there are other ways beside chat to interact with the visitor and you might want to launch those as well.

SMS

ActivEngage.launchSms();

Unlike Chat, SMS needs some additional configuration on the ActivEngage side to support, as such, it may or may not be active for any particular site. It's best to coordinate with our partner to ensure SMS is active for the site you working with.

ActivTarget

This integration would require a deep integration with us as you would need to pass the specific ActivTarget ID that you would like to launch. Please reach out to our partner team. ActivEngage.launchActivTarget();

Invite

This integration would require a deep integration with us as you would need to pass the specific ActivTarget ID that you would like to launch. Please reach out to our partner team. ActivEngage.launchInvite();

Launcher

This integration would require a deep integration with us as you would need to pass the specific ActivTarget ID that you would like to launch. Please reach out to our partner team. ActivEngage.addLauncher();

Expressing Intent

When creating a custom launch point you may want to create an element that says more than just "Click here to Chat", our specialist and the dealer themselves can handle many different conversation types. You might want to create a button that says "Schedule a Test Drive" or "Set an Appointment" and have those buttons launch chat in such a way so that the specialist knows the intent behind the customer's click. We created an attribute to support that scenario "chat-intent" (also supported through JS SDK below). This attribute currently supports five different intents:

• Set Service Appointment - value: "serviceAppointment"
• Buy Car Online - value: "buyCarOnline"
• Check Availability - value: "checkAvailability"
• Request a Quote - value: "requestQuote"
• Test Drive - value: "testDrive"

Each of these intents is further customize with a corresponding welcome message.

When starting a chat with the "Check Availability" intent the customer is greeted with "Hello! I will be glad to assist you with the availability of this vehicle today!"

Markup Examples:

To pass the intent you simply pair it with the button markup. For example:

<div chat-launch="button" chat-intent="intent">
    [PLACE_YOUR_IMAGE/HTML_HERE]
</div>

A complete example of this would be:

<div chat-launch="available-btn" chat-intent="checkAvailability">
  <button type="button" class="btn btn-success">Check Availability!</button>
</div>

JavaScript Examples

Here's how you would do the same thing in JavaScript.

ActivEngage.launchChat({
    data: {
        launchSource: "available-btn"
    },
    intent: "checkAvailability"
});

Consuming Events

Pv2 also includes several useful events that can be subscribed to.

ActivEngage Ready

You can hook an event that will let you know when the ActivEngage script has been loaded and is ready to accept commands by using the "ActivEngageReady" event we publish on the document.

document.addEventListener("ActivEngageReady", , function (e) {
    // do something here
});

Availability Events

Availability events let you know if an operator is available to handle chats. In some use cases you might not want to show the CTAs if an operator is not availale. But this is not required. We support offline forms for when operators are not present.

OnAvailable

This event fires when chat is available. It can be hooked using the attribute chat-onavailable. For example:

<body chat-onavailable="customCallbackFunction">

It can also be hooked via JavaScript. For example:

ActivEngage.events.onAvailable(function(){
    customCallbackFunction();
});

OnUnAvailable

This event fires when chat is NOT available. It can be hooked using the attribute chat-onunavailable. For example:

<body chat-onunavailable="customCallbackFunction">

It can also be hooked via JavaScript. For example:

ActivEngage.events.onUnavailable(function(){
    customCallbackFunction();
});

Chat Events

onChatLaunched

This event fires when chat is launched. It can be hooked using the attribute chat-onlaunch. For example:

<body chat-onlaunch="customCallbackFunction">

It can also be hooked via JavaScript. For example:

ActivEngage.events.onChatLaunched(function(){
    customCallbackFunction();
});

onChatAnswered

This event fires when a chat is answered. It can be hooked via JavaScript. For example:

ActivEngage.events.onChatAnswered(function(){
    customCallbackFunction();
});