How to set up Custom Chat Invitations

A Custom Chat Invite or Custom Chat Invitation defines the actual interface seen by visitors upon invitation. Invitations can be customized in a number of ways.

  1. Create a Custom Chat Invite.
    1. From the main menu of the operator client, go to Setup > Account Setup. The Account Setup window is displayed.
    2. On the left menu of the Account Setup window, click Invitations > Custom Chat Invitations > New. The New Custom Chat Invitation window is displayed.
  2. Name the invitation.

    This is for internal reference and is not seen by visitors.

  3. Choose an Invite Type:
    • Simple Image Invite displays a basic image to the visitors that they click to initiate chat.
    • Chat Form Invite displays a chat invitation that is structured like a Chat Window chat form.
    • Pre-Chat Form Invite displays a chat invitation that is structured like a Chat Window pre-chat form.
    • JavaScript Invite provides flexibility by allowing you to craft a JavaScript function that will be called when rule criteria. Within your function, you can utilize any animation type or visual presentation you desire; your imagination and JavaScript skills are the only limitations.
  4. Set animation options:
    • Animation Duration sets the length of time (in seconds) that the chat invitation is displayed to the visitor. For animated invitations, this controls how fast the Chat invitation will move across the browser.
    • Animation Type > Left To Right starts the chat invitation at or near the left edge of the visitor's browser and animate it across to the right edge of the browser
    • Animation Type > Right to Left starts the chat invitation at or near the right edge of the visitor's browser and animate it across to the left edge of the browser
    • Animation Type > No Animation instantly displays the chat invitation in the visitor's browser
    • Animation Type > No Animation - Fade-In makes the chat invitation appear gradually (as opposed to making it appear instantly)
  5. Under Box Width and Box Height you can set the invitation's width and height in pixels.
  6. Under Position you can define the invitation's initial relative location on the visitor's browser window.
    Option Description
    Browser Window With this option, the invitation starts in the defined position on the viewable browser window. As the visitor scrolls up/down, the page content moves up/down, but the invitation stays in its defined position.
    • Vertical Alignment (or offset) is the relative position from the top edge of the viewable browser window. This number must be greater than 0.
    • Horizontal Alignment (or offset) is the relative position from the left edge of the viewable browser window. This number must be greater than 0.
    HTML Document With this option, the invitation starts in the defined position on the HTML page. As the visitor scrolls up/down, the invitation moves up/down along with all other page content.

    Vertical position

    • Top is the relative vertical position down from the top of the HTML page. This number must be >= 0
    • Center is the relative vertical position from the center of the HTML page. A negative value indicates a relative distance above the vertical center, while a positive value indicates a relative distance below the vertical center. The value 0 represents the center.
    • Bottom is the relative vertical position up from the bottom of the HTML page. This number must be greater than 0.

    Horizontal position

    • Left is the relative horizontal position in from the left edge of the HTML page. This number must be >= 0
    • Center is the relative horizontal position from the center of the HTML page. A negative value indicates a relative distance to the left of the horizontal center, while a positive value indicates a relative distance to the right of the horizontal center. The value 0 represents the center.
    • Right is the relative horizontal position from the right edge of the HTML page. This number must be greater than 0.
  7. Under Custom Window, choose the Chat Window to associate with the invitation.

    To learn about chat windows, see How to set up a Chat Window definition.

    • To use the default chat window definition, do nothing (the default is called My Chat Window)
    • To use a custom chat window definition, click the button with three-dots ... and choose a custom window.
  8. Under Parameters you can customize the invitation's design, text, and more.
    Tip: Each Invite Type has unique parameters for customizing your invitation. To view context-sensitive help for an item that is unclear, simply hover your mouse over the field.
  9. Under Advanced (HTML), you can directly edit the invitation's HTML to achieve a finer level of customization.
    Attention: Editing HTML can result in a broken invitation!
  10. Under Mobile you can set up a mobile-friendly version of the invitation.
    • To never use a mobile-friendly invitation and always show the desktop invitation to all visitors regardless of device type, select Never.
    • To show a mobile-friendly invitation to visitors who are detected as mobile users, select On Mobile Devices.
    • To show the mobile-friendly invitation to all visitors regardless of device type, select For All Computers and Mobile Devices.
    Tip: Each Invite Type has unique settings that you can use to customize your mobile-friendly invitation. To view context-sensitive help for an item that is unclear, simply hover your mouse over the field.

    Result: