Skip to content
Nexvio Logo Nexvio.ai Docs

Custom Initial Messages

Custom Initial Messages

Overview

Custom Initial Messages allow you to dynamically set the first message your Nexvio.ai chatbot displays to users when it loads. This feature is particularly useful for:

  • Personalizing the greeting based on the user’s data
  • Changing the initial message based on the page the user is viewing
  • Providing context-specific help based on user behavior
  • Creating a more tailored user experience

Setting Custom Initial Messages

Basic Implementation

You can set a custom initial message using the JavaScript SDK:

// Set a custom initial message
window.nexvio('setInitialMessage', 'Welcome to our website! How can I help you today?');

This needs to be called before the chatbot is first rendered or opened, ideally right after the Nexvio.ai script is loaded.

Dynamic Messages Based on Page Context

You can change the initial message based on the page URL:

// Change initial message based on the current page
const currentPath = window.location.pathname;


if (currentPath.includes('/products')) {
  window.nexvio('setInitialMessage', 'Looking for a specific product? I can help you find what you need!');
} else if (currentPath.includes('/support')) {
  window.nexvio('setInitialMessage', 'Welcome to our support center. What can I help you troubleshoot today?');
} else if (currentPath.includes('/pricing')) {
  window.nexvio('setInitialMessage', 'Interested in our pricing options? I can explain our plans and help you choose the right one.');
} else {
  window.nexvio('setInitialMessage', 'Welcome! How can I assist you today?');
}

Personalized Messages with User Data

If you have user information available, you can personalize the greeting:

// Personalize the greeting with user information
const userName = getUserName(); // Your function to get the user's name
const isReturningUser = checkIfReturningUser(); // Your function to check if the user has visited before


if (userName && isReturningUser) {
  window.nexvio('setInitialMessage', `Welcome back, ${userName}! How can I help you today?`);
} else if (userName) {
  window.nexvio('setInitialMessage', `Hello ${userName}! I'm here to help you navigate our website. What are you looking for today?`);
} else {
  window.nexvio('setInitialMessage', 'Hello! I'm here to help. What brings you to our website today?');
}

Time-Based Greetings

You can change the greeting based on the time of day:

// Get time-appropriate greeting
function getTimeBasedGreeting() {
  const hour = new Date().getHours();


  if (hour < 12) {
    return 'Good morning';
  } else if (hour < 18) {
    return 'Good afternoon';
  } else {
    return 'Good evening';
  }
}


// Set the initial message with the time-based greeting
window.nexvio('setInitialMessage', `${getTimeBasedGreeting()}! How can I assist you today?`);

Advanced Usage

Combining Multiple Factors

For a more sophisticated approach, you can combine multiple factors:

function generateInitialMessage() {
  const currentPath = window.location.pathname;
  const userName = getUserName(); // Your function to get user's name
  const timeGreeting = getTimeBasedGreeting(); // Function from previous example


  // Base greeting
  let greeting = timeGreeting;


  // Add user name if available
  if (userName) {
    greeting += `, ${userName}`;
  }


  // Add context-specific message based on path
  let contextMessage;


  if (currentPath.includes('/products')) {
    contextMessage = "I see you're browsing our products. Can I help you find something specific?";
  } else if (currentPath.includes('/checkout')) {
    contextMessage = "Need any help completing your purchase?";
  } else if (currentPath.includes('/support')) {
    contextMessage = "What can I help you troubleshoot today?";
  } else {
    contextMessage = "How can I assist you today?";
  }


  return `${greeting}! ${contextMessage}`;
}


// Set the initial message
window.nexvio('setInitialMessage', generateInitialMessage());

Session-Based Context

You can change the message based on the user’s session activity:

// Set message based on previous activity in the session
function getSessionBasedMessage() {
  const viewedProducts = JSON.parse(sessionStorage.getItem('viewedProducts') || '[]');
  const abandonedCart = JSON.parse(sessionStorage.getItem('cartItems') || '[]');


  if (abandonedCart.length > 0) {
    return "I noticed you have items in your cart. Do you need help completing your purchase?";
  } else if (viewedProducts.length > 0) {
    const lastProduct = viewedProducts[viewedProducts.length - 1];
    return `I see you were looking at our ${lastProduct.category} products. Can I help you find what you're looking for?`;
  } else {
    return "Welcome! How can I assist you today?";
  }
}


window.nexvio('setInitialMessage', getSessionBasedMessage());

Using with Identity Verification

You can combine custom initial messages with identity verification:

// After setting up identity verification
window.nexvio('identify', {
  user_id: "123456",
  user_hash: "generated_hash_from_server",
  user_metadata: {
    name: "John Smith",
    account_type: "premium",
    last_login: "2023-06-15"
  }
});


// Then use the provided metadata for personalization
window.nexvio('on', 'ready', function() {
  // Get user info from the identify call
  const userInfo = window.nexvioUserInfo || {};
  const name = userInfo.user_metadata?.name;
  const accountType = userInfo.user_metadata?.account_type;


  let message = "Welcome";


  if (name) {
    message += `, ${name}`;
  }


  if (accountType === "premium") {
    message += "! As a premium member, I'm here to provide you with priority assistance. How can I help you today?";
  } else {
    message += "! How can I assist you today?";
  }


  window.nexvio('setInitialMessage', message);
});

Implementation Timing

For optimal results, you should set custom initial messages:

  1. After the Nexvio.ai script has loaded
  2. Before the chatbot is first opened or interacted with by the user

Here’s a recommended implementation pattern:

// Load the Nexvio.ai script
(function(n,e,x,v,i,o){/* Nexvio.ai embed code */})();


// Set up custom initial message as soon as the nexvio object is available
function setupNexvio() {
  if (window.nexvio) {
    // Configure your custom initial message
    window.nexvio('setInitialMessage', 'Your custom message here');


    // Additional configuration...


    clearInterval(checkInterval);
  }
}


// Check periodically if nexvio is loaded
const checkInterval = setInterval(setupNexvio, 100);

Best Practices

  1. Keep Messages Concise: Initial messages should be brief and to the point. Long messages can overwhelm users.

  2. Be Relevant: Make sure your message is relevant to the user’s context and the page they’re viewing.

  3. Avoid Repetition: If users navigate across multiple pages, avoid showing the same custom message repeatedly.

  4. Test Different Messages: A/B test different initial messages to see which ones lead to higher engagement.

  5. Fallback Option: Always have a default message ready if dynamic data is unavailable.

  6. Privacy Considerations: Be mindful of privacy when using personal data in messages. Don’t disclose sensitive information.

// Example of avoiding repetition
if (!sessionStorage.getItem('chatbotGreeted')) {
  // Only set a personalized greeting the first time
  window.nexvio('setInitialMessage', 'Welcome to our site! How can I help you today?');
  sessionStorage.setItem('chatbotGreeted', 'true');
}

Refreshing Messages on Page Change

For single-page applications, you might want to update the initial message when the route changes:

// For single-page applications
function updateInitialMessageOnRouteChange() {
  const currentPath = window.location.pathname;


  // Clear any ongoing conversation
  window.nexvio('resetConversation');


  // Set a new initial message based on the new route
  if (currentPath.includes('/products')) {
    window.nexvio('setInitialMessage', 'Looking for a specific product?');
  } else if (currentPath.includes('/blog')) {
    window.nexvio('setInitialMessage', 'Interested in learning more about our industry?');
  } else {
    window.nexvio('setInitialMessage', 'How can I help you today?');
  }
}


// Hook this into your routing system's events
// Example for a basic routing system:
window.addEventListener('popstate', updateInitialMessageOnRouteChange);


// For frameworks, use their routing events instead
// React Router example:
// history.listen(updateInitialMessageOnRouteChange);

Examples for Common Scenarios

E-commerce Product Page

// On a product page, offer specific help for that product
const productName = document.querySelector('h1.product-title').textContent;
const productCategory = document.querySelector('meta[name="product-category"]').getAttribute('content');


window.nexvio('setInitialMessage', `I see you're looking at our ${productName}. Would you like to know more about our ${productCategory} collection?`);

Support Page

// On a support page, offer immediate assistance
window.nexvio('setInitialMessage', 'Welcome to our support center. What issue are you experiencing today? I can help with troubleshooting, returns, or connect you with our support team.');

Pricing Page

// On a pricing page, offer help with deciding between plans
window.nexvio('setInitialMessage', 'I see you're looking at our pricing options. Would you like me to explain the differences between our plans to help you choose?');