Kadong•4mo ago

How to add custom field for POST on chat widget assistant?

I'm trying to add a custom input inside the form when that chat widget is rendered. It doesn't show on my logs. This is the remix link https://buildship.app/remix/2618166a-add2-4e3b-9d8b-c3b1cae9490c Here's my script: function addCustomField() { const inputElement = document.getElementById("buildship-chat-widget__input"); if (inputElement) { // Check if the hidden input already exists by name or id if (!document.querySelector('input[name="user_role"]')) { // Create hidden input element const hiddenInput = document.createElement("input"); hiddenInput.type = "hidden"; hiddenInput.name = "user_role"; // Add name attribute hiddenInput.value = "default_role"; // You can customize this value as needed
// Insert the hidden input after the input element inputElement.parentNode.insertBefore(hiddenInput, inputElement.nextSibling); console.log("Hidden input 'user_role' added."); } else { console.log("Hidden input 'user_role' already exists."); } } else { console.error("Chat input field not found."); } } Thank you in advance!

BuildShip - Visual backend workflow builder

Visually build workflows and powerful backend logic for your apps. Powered by AI, connect to anything with or without code.

2 Replies

AI Support•4mo ago

AI Support Bot Information

<@700710888499314720> you can react on the relevant answer (message) with a ✅ in this thread when you think it has been solved, by the bot or by a human! Anyone can react on this message with a ❌ if the GPT bot is unhelpful or hallucinating answers. Please note: Team members will review and answer the questions on best efforts basis.

AI Support•4mo ago

AI Response

To debug why your custom input field is not showing up in the logs, you might need to check a couple of points in your script. Here are some things to verify and a few modifications to try: 1. Ensure Correct Input Element ID: Verify that the ID buildship-chat-widget__input exists in your rendered HTML. The correct identification of the input element is crucial. 2. Check for Errors in Console: Monitor the browser console for any JavaScript errors when the widget is rendered and when the function is triggered. 3. Time of Function Call: Ensure that addCustomField() is called after the DOM is completely loaded. You might use window.onload or place the script at the bottom of the HTML file. 4. Debugging Steps: - Add console.log statements to check step-by-step flow. - Verify that the input field is rendered before adding the hidden input. 5. Visibility in Logs: Check if the logs capture DOM changes dynamically. Here's an updated version of your script with additional debugging steps:

function addCustomField() {
    // Log when the function is invoked
    console.log("addCustomField function is called");

    const inputElement = document.getElementById("buildship-chat-widget__input");
    if (inputElement) {
        console.log("Chat input field found.");

        // Check if the hidden input already exists by name or id
        if (!document.querySelector('input[name="user_role"]')) {
            // Create hidden input element
            const hiddenInput = document.createElement("input");
            hiddenInput.type = "hidden";
            hiddenInput.name = "user_role";
            hiddenInput.value = "default_role";

            // Insert the hidden input after the input element
            inputElement.parentNode.insertBefore(hiddenInput, inputElement.nextSibling);

            console.log("Hidden input 'user_role' added.");
        } else {
            console.log("Hidden input 'user_role' already exists.");
        }
    } else {
        console.error("Chat input field not found.");
    }
}

// Ensure the function is called when the DOM is fully loaded
window.addEventListener("load", addCustomField);

function addCustomField() {
    // Log when the function is invoked
    console.log("addCustomField function is called");

    const inputElement = document.getElementById("buildship-chat-widget__input");
    if (inputElement) {
        console.log("Chat input field found.");

        // Check if the hidden input already exists by name or id
        if (!document.querySelector('input[name="user_role"]')) {
            // Create hidden input element
            const hiddenInput = document.createElement("input");
            hiddenInput.type = "hidden";
            hiddenInput.name = "user_role";
            hiddenInput.value = "default_role";

            // Insert the hidden input after the input element
            inputElement.parentNode.insertBefore(hiddenInput, inputElement.nextSibling);

            console.log("Hidden input 'user_role' added.");
        } else {
            console.log("Hidden input 'user_role' already exists.");
        }
    } else {
        console.error("Chat input field not found.");
    }
}

// Ensure the function is called when the DOM is fully loaded
window.addEventListener("load", addCustomField);

This updated script includes additional logging to help trace through the flow and identify what might be going wrong. Make sure that window.addEventListener("load", addCustomField); is correctly waiting for the DOM to be ready before attempting to add the custom field. For more details and specific examples regarding the integration with custom fields inside chat widgets on BuildShip, refer to their integration examples. If you still face issues, it might be helpful to check the BuildShip documentation or community forums for detailed troubleshooting specific to their platform .

BuildShip AI Support