Invitation Design

A bubble, inline, or popover invitation can be designed in the Invitation Design screen: Account Setup > Design > Invitation Design (https://app.velaro.com/#/admin/design/invitations).


Each Invitation is Rules based. You may wish to review the Rule Builder to decide what conditions the invitations may require Rule Builder


To create an invitation, click the green +New Invitation button at top right.

To Edit an exiting invitation: click the Edit button on the invitation.

Invitations are launched in the order that they are listed on the invitation page.

Click on the handle next to the invitation name to drag the invitation so it appears in the list of invitations in the desired order.
 

Bubble Invitations

Bubble invitations are used in conjunction with the inline chat window. The bubble will replace the chat window with a small icon and text. The invitation can be configured here:

The image used here is linked to the image used when an active inline chat is minimized, and can be configured in the Design→ Chat designer section in the Launcher module:

Sample Bubble Invitation:

Inline Invitations

The Invitation designer defaults to the "Inline" Style of invitation. An inline invitation is displayed in the standard inline chat window.

There are two different options for inline invitations, you may use the chat window as the invitation and add a message to it, or you may upload your own invitation image. The invitation will appear in the place of the chat window when launched.

Sample Inline Invitation:

Pop-Over Invitations

Pop-over invitations can be used to show an invitation anywhere on the page, or to float an invitation across the page. This style does require some HTML and offers the ability to use CSS styling.


Controls:

ControlDescription
Invitation NameThe name of the invitation, as displayed on the invitation screen.
DescriptionA description of the invitation, for internal use, to provide more detail.
Manual Invitation
  • Unchecked (default): The invitation is automatic based on rules. 
  • Checked: The invitation is manual, to be send by an agent from the visitor monitoring list or map. This feature is an Enterprise feature. The rule builder is not available when the invitation is manual. See Visitor Monitoring > Visitors for instructions on sending a manual invitation.

Create rules to display

The rule builder interface that allows the creation of rules that control automatic invitations. See Rule builder for more information.

Recommended rules include:

  • Chat is Available is True (The invitation only appears when the agents are online)
  • Time in page is ___ seconds (chose to delay the launch so it isn't instantaneous with the page load)



Style of invitation

Inline Chat, Inline Image. or Pop-over

  • Inline invitations display in the inline position on the web page, in the place of the chat launcher icon
  • Pop-over invitations can appear anywhere on the screen and can be set up to float across the screen



Inline Chat

InlineChat- Will launch the chat window

  • Message- This is the test that will display for the customer when the inline chat window launches.
  • Max Fires: How many times the invitation will load in a browser session for each visitor

Inline ImageUpload a custom image to launch in place of the chat launcher
Seconds to DisplayThe length of time the image shows on the page
Redirect Visitor to groupIf the page routes to a specific group, but based upon accepting this invitation to chat, you wish to route the visitor to another group
Allow during chatAllow the invitation to launch even if a chat is ongoing
Floats onto screenAllows the image to appear in one position and to move to another
HTML Editor

Allows you to alter the HTML of the invitation and the position of the close button or X.

A recommended starting point is: 

<div id="velaro-invitation-name">

<div id="velaro-content">

</div>

{Chat}
<img src="REPLACE WITH IMAGE URL" />{EndChat} {Close}
<p style="position: absolute; top:0px; left:250px;">
<img src=" REPLACE WITH URK FOR X OR CLOSE " />{EndClose}
</p>
</div>


CSS EditorUse this to edit the CSS of your pop-over invitation.