N8n native chatbot

Questions
1

The default text in the title of the chatbot is English. I want to change that text in a different language. How van I change that? I can change the way how the bot starts in a different language but I cannot see how to change it in the title (Hi There! Start a chat. We’re here to help you 24/7

2

Could you share screenshot of your layout, please? Which chatbot, the build-in one from n8n?

Screenshot at 17.35.21
Screenshot at 17.35.21792×1606 85.1 KB

if n8n like this when chat message received, you can specify the options for Title and Subtitle, you need to click add field to find them.

Hope this helps.

3

Thanks for your help.

I changed all texts and know how to change the colors as well. The only thing is to change the text in the button. I cannot change it from the html code I used to create this current chatbot.

This is the HTML-code I use now:

<!-- Widget Configuration -->
<script>
    window.ChatWidgetConfig = {
        webhook: {
            url: 'https://sponsorkliks.app.n8n.cloud/webhook/73a59708-e8f6-42f9-a5cb-5e8397ccd8ab/chat',
            route: 'general'
        },
        branding: {
            logo: 'https://www.sponsorkliks.com/site/wp-content/uploads/2020/11/licht_200_200.png',
            name: 'SponsorKliks', // Your company name
            welcomeText: 'Hoi 👋, waarmee kan ik je helpen vandaag?', //Welcome message
            responseTimeText: 'Normaliter reageren we direct op je bericht' //Response time message
        },
        style: {
            primaryColor: '#854fff', //Primary color
            secondaryColor: '#6b3fd4', //Secondary color
            position: 'right', //Position of the widget (left or right)
            backgroundColor: '#ffffff', //Background color of the chat widget
            fontColor: '#333333' //Text color for messages and interface
        }
    };
</script>
<script src="https://cdn.jsdelivr.net/gh/WayneSimpson/n8n-chatbot-template@ba944c3/chat-widget.js"></script>
<!-- Widget Script -->

Thank again for your help.

Arno

image
image500×752 24.2 KB

4

@Arno_Kensen Hey if you didn’t solve it,

You can add additional script which can do this, see below ure script, and below that what needs adding.

<!-- Widget Configuration -->
<script>
    window.ChatWidgetConfig = {
        webhook: {
            url: 'https://sponsorkliks.app.n8n.cloud/webhook/73a59708-e8f6-42f9-a5cb-5e8397ccd8ab/chat',
            route: 'general'
        },
        branding: {
            logo: 'https://www.sponsorkliks.com/site/wp-content/uploads/2020/11/licht_200_200.png',
            name: 'SponsorKliks', // Your company name
            welcomeText: 'Hoi 👋, waarmee kan ik je helpen vandaag?', //Welcome message
            responseTimeText: 'Normaliter reageren we direct op je bericht' //Response time message
        },
        style: {
            primaryColor: '#854fff', //Primary color
            secondaryColor: '#6b3fd4', //Secondary color
            position: 'right', //Position of the widget (left or right)
            backgroundColor: '#ffffff', //Background color of the chat widget
            fontColor: '#333333' //Text color for messages and interface
        }
    };
</script>
<script src="https://cdn.jsdelivr.net/gh/WayneSimpson/n8n-chatbot-template@ba944c3/chat-widget.js"></script>
<!-- Widget Script -->

Add this script below, and you can change the btn.innerHTML = to ure text of choice.

<script>
window.addEventListener('DOMContentLoaded', function() {
  setTimeout(function() {
    var btns = document.querySelectorAll('button');
    btns.forEach(function(btn) {
      if (btn.textContent.includes('Send us a message')) {
        btn.innerHTML = '<span>💬</span> N8N is amazing';
      }
    });
  }, 1500); // Adjust this delay if your widget loads slowly
});
</script>

it search for button with text “Send us a message” so just ensure this isn’t else where onsite, but this will override it.

Hope this helps,

Samuel