Conversation Widget Conversation Widget

Conversation Widget

Maria Scieranska

Objective

Setting up the Conversation widget

Applies To

  • Jumper
  • Web
  • Conversation Widget

Content: 

  1. Conversation Widget Overview
  2. Key Features
  3. How to enable Conversation Widget
  4. How to setup a Message
  5. Use Cases

With Jumper.ai, you can embed instant messaging widgets anywhere on your website and never miss an opportunity to start a dialogue with your customers.

Unlike other chat widgets out there, Jumper's Conversation widget is laser-focused on e-commerce!

The Conversation widget makes your website and apps come to life with interactive elements.
Grab your customers' attention and start a conversation with the right context. Embed a conversation anywhere - on your website, product pages, blog articles, FAQ Pages, and more.

Remove uncertainty from the buying process

Answer questions and address concerns for your shoppers through Conversation widgets while they are on your website researching your product or service.

a1.png

Start conversations with your content

Drive deeper engagement with your readers by simply adding a line of chatbox code to your blogs and branded content.

a2.png

Get chatty with visitors on influencer websites

Add conversational commerce to your product placements on influencer blogs so you can quickly and easily engage with shoppers the moment you catch their attention.

a3.png

Improve visibility of new launches and offers

Showcase product videos, share new product drops, and send sales alerts to website visitors through message pops on your store pages.

a4.png

Make support easy to find

Embed a live chat widget for self-service in a visible place on your website so it's easy for shoppers and customers to ask questions. And, you can use chatbots to provide a faster response!

a5.png

Key Features of Jumper.ai Conversation Widget:

Appearance: 

  • Personalization - Customize the Background color, Brand logo, and Chat bubble image to match your brand’s look.
  • Greeting Message - Use a beautiful greeting to encourage visitors to start chatting.

a6.png

Simple Copy-and-paste installation: 

Add a Conversation Widget to your website with just a couple of clicks.

a7.png

Message Types:

The conversation widget has 3 types of messages: Blog embed, Message pop-ups, and Chatbox which enhances the user experience by blending in with your website, article, or even just a landing page.

a8.png

Blog embed:

a9.png

Message Pop-ups:

b1.png

Chatbox:

b2.png

Conversation Components

The Conversation widget supports conversation components such as text, image, video, product checkout, collection flow, and quick replies with button actions like product checkout, collection flow, bot flow, connect to a live agent, and re-direct to the brand website for creating an engaging conversational experience. You can mix and match text and images with interactive elements.

b3.pngb4.png

Trigger events:

It gives you the control to include the Conversation widget on specific pages of your website or exclude the Conversation widget from certain pages of your website.

You can delay the chat widget from showing up on a page after a specific amount of time by using the after-delay feature.

b5.png

One-click management

Show and hide the Conversation Widget with a single click with the help of the activate/de-activate toggle button.

c1.png

Let's get you started on enabling this beautiful experience

Procedure

  1. First, navigate to Sales channels >> Web.

    c2.png
  2. Click on Setup conversation messages.
    Note: The welcome screen below is only visible during the initial setup for a user.
    c3.png
  3. On the Add your Website step, provide the domain URL for which you want to enable your Conversation widget.
    Note: The welcome screen below is only visible during the initial setup for a user.
    c4.png
  4. On the Customize appearance step, you can customize the background color, logo, chat bubble image & greeting message for your Conversation widget.
    Note: The welcome screen below is only visible during the initial setup for a user.
    c5.png
    On the Customize appearance step, you can customize the background color, logo, chat bubble image & greeting message for your Conversation widget.
    Note: The welcome screen below is only visible during the initial setup for a user.
    c6.png
    Greeting message: This message is displayed as the greeting message for your visiting customers right below your shop name & shop logo.
    c7.png
    Brand logo: Under the brand logo option, you can upload your own business logo, this logo will be displayed as your store logo for the Conversation widget.
    c8.png
  5. Chat bubble image: Under the chat bubble image option, you can upload your own chat bubble image for the Conversation widget.
    c9.png
    Once you have added your customization for your widget click on the Save option.
  6. Under Add code to website step, copy the code from the clipboard & add it to the header section of your website code. Once you have added the code to your webpage you can click on the Installation done! option.
    Note: The welcome screen below is only visible during the initial setup for a user.
    d1.png

Once the Conversation widget installation is completed on your website, compose a message to show to your visitors when they visit your website page/article. By creating a new message for the Conversation widget.

Now, let’s set up a Message by following the below steps:

  1. Click on Add a message to start composing the message.
    Note: The below screen is only visible during the initial setup for a new message.
    d2.png
    Once you start building multiple widgets for your business, you can create new widgets by clicking on the Create new option under the Conversation widget.
    d3.png
  2. First provide a name for your widget, by default the platform generates a random name.
    d4.png
  3. Based on the use case, select the type of Conversation widget you'd best like to delight your customers with
    d5.png
  4. Customize the trigger message by combining text and images with interactive elements.
    d6.png

    The following conversation components are available:

    • Text 
      d7.png
    • Image
      d8.png
    • Video
      d9.png
    • Product Checkout
      e1.png
    • Collection Flow
      e2.png
    • Quick Reply with Button actions:
      Start a product checkout 
      Start a collection flow
      Start a bot flow
      Start live chat
      Open a website
      e4.pnge5.png
      e6.png

  5. Optional:
    You can set up the specific pages of your website on which you wish to either include or exclude the Conversation widget. 

    You can delay the chat widget from showing up on a page after a specific amount of time by selecting the options available under the after-delay feature.

    e7.png

  6. The final step is to save your changes and publish the Conversation widget on your blog or webpage
    • Blog 

    Place the below code inside your blog post wherever you want the magic to begin

    <div id="jumperInContextContainer"></div>

    Click on the publish button to save your changes and launch the Conversation widget on your blog.
    e8.png

    • Message pop-up and chatbox

    Click on the publish button to save your changes and launch the Conversation widget on your webpage
    e9.png

    Et Voila! You are ready and Conversation to attend to your customers

    You can show or hide the Conversation widget with the help of the Activate/De-activate toggle button.

    f1.png

  7. In case you want to edit your URL for your webpage or customize your conversation widget, click on the gear icon to edit the same.
    f2.png
  8. Under the Appearance tab, you can customize the Conversation widget anytime in the future.
    f3.png
  9. Under Your Website tab, you can update your webpage URL in case you have to change it in future.
    f4.png

Use cases:

Make your static pages come to life with the help of the Conversation Widget. Support, and enable e-commerce - No coding required

In-context conversations

Engage customers and get their attention when it matters the most. Embed a message in between your content.

  • Blog articles

Start a conversation with customers when they are reading your articles. Run promotions, ask surveys, drive consideration, sell products, or simply support customers.

  • Product Pages

Address your customer's concerns right when they are on your product pages or checkout pages.

  • Landing Pages

Create more interactive micro landing, launch products, run surveys, and convert customers.

Chatbox

Greet customers with tailored messages for different pages on your website.

  • Upsell Products

Share product videos, styling tips, and new collections get pre-orders and convert visitors into customers.

  • Run Promotions

Share discounts, surprise offers, gamified rewards, run surveys, and more.

  • Support customers

Answer customer queries either through automated replies or human agents.

Articles in this section