Instructions for Setting Contact Information in the Helply AI agent

Our widget includes a contact form that allows users to submit their information. To enhance the user experience, you can pre-fill the contact form with the user's email and name by integrating the following code snippet into your website or application. This ensures a smoother interaction and reduces redundant input for your users.

Step-by-Step Integration Guide

1. Check Widget Availability

Ensure that the widget is loaded so that the widget api is available on your website or application before attempting to set the contact information. You can do this by checking for the existence of window.helplyAgentWidget.

2. Use the setContact Method

The setContact method allows you to programmatically set the user's email and name. Below is the JavaScript code snippet to include in your implementation:

if (window.helplyAgentWidget) {
    window.helplyAgentWidget.setContact({
        email: 'user@example.com',
        firstName: 'John',
        lastName: 'Doe'
    });
}

3. Replace Placeholder Values

• Replace user@example.com with the email address of the user.

• Replace John and Doe with the first and last name of the user respectively.

4. Call After User Info is Available

Place this code snippet after retrieving the user's information from your website or application. For example:

fetchUserData().then(user => {
    if (window.helplyAgentWidget) {
        window.helplyAgentWidget.setContact({
            email: user.email,
            firstName: user.firstName,
            lastName: user.lastName
        });
    }
});

Example Use Case

If your website fetches user details upon login or registration, you can use the setContact method immediately after fetching the data. This ensures that the widget reflects the correct user information as soon as it loads.

Troubleshooting

• Widget Not Loaded: Ensure the widget is initialized before calling the setContact method.

• Missing User Data: Verify that the user information (email, first name, and last name) is available before invoking the method.

Advanced Tips

Listening for the Widget to Load

If you want to ensure that the widget is fully loaded before performing any actions, you can use the helplyAgentLoaded event. Add the following code to listen for the event:

window.addEventListener('helplyAgentLoaded', handleAgentLoaded);

function handleAgentLoaded() {
    console.log('Helply Agent Widget is loaded.');
    // Additional setup or actions can go here
}

This is optional and can be useful if your integration setup requires precise control over the widget's loading state.