Flowise: Enhancing Chatbot Engagement with User IP Address

[toi500]

How to obtain the end-user's IP address and leverage it for personalized greetings

1. Client-side IP Address Acquisition
   Retrieving the end-user's IP address requires a client-side approach. This can be achieved with custom code by injecting a JS function into the embedded Flowise script. The function utilizes the Fetch API to query a free third-party service like Ipify, which provides the user's public IP address. This IP address is then stored as a variable IP_ADDRESS.

2. Integrating the IP_ADDRESS variable within Flowise
   To utilize the captured IP within the Flowise environment, it needs to be passed as a variable during chatbot initialization. Then, the IP address can be accessed within the Flowise flow as vars.IP_ADDRESS.

3. Enhancing User Engagement with Geolocation
   One obvious use we can do with this is greeting the customer, knowing their location, and providing the weather for their city.

4. Files
   Here, I am including a Flowise script ready to use that can store the user's IP address, the custom tool where the IP_ADDRESS variable is used, the custom tool for getting the weather, and a simple flow with a custom system prompt to make it work.

 //  by @amansoni7477030

 <script type="module">
    import Chatbot from "https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js";

    async function getIpAddress() {
        try {
            const response = await fetch('https://api.ipify.org?format=json');
            const data = await response.json();
            return data.ip;
        } catch (error) {
            console.error('Error fetching IP address:', error);
            return 'unknown'; // Fallback value
        }
    }

    // Initialize the chatbot after getting the IP address
    async function initializeChatbot() {
        const ipAddress = await getIpAddress();

        Chatbot.init({
            chatflowid: "HERE",
            apiHost: "HERE",
            chatflowConfig: {
                vars: {
                    "USER": "myuser",
                    "IP_ADDRESS": ipAddress
                }
            },
            theme: {

            },
        });
    }

    // Initialize the chatbot
    initializeChatbot();
</script>

Example Chatflow.json
user_location-CustomTool.json
weather_retriever_wttrin-CustomTool.json