App Logo
Integrations

Integration with Website

Integration with Website

Detailed instructions on how to embed your Resinq chatbot into a website, including integration scripts and customization options.

Deniz Colak

Deniz Colak

Integrating your Resinq chatbot into your website can significantly enhance user engagement by providing direct support and interaction. This guide will explain how to embed your chatbot using HTML and JavaScript, and how to customize it for a seamless integration.

Accessing Embed Settings

To configure your chatbot for website integration:

  • Navigate to the Resinq dashboard.
  • Click on 'Chatbot' then select Embed.
  • A popup will appear, offering different options for embedding your chatbot, such as Web, iOS, Android, React Native, and Flutter.

Embedding the Chatbot

Resinq provides a straightforward script for web integration:

<script src="https://newchat-ai-six.vercel.app/chatbot.js"></script>
<script>
  Chatbot.init({
    chatbotId: "clxelx9jx0001ghlho30v3qg3",
  });
</script>

Steps to Embed:

Include the Script

Insert the script tag into the <head> section or just before the closing </body> tag to ensure all page elements load before the script.

Initialize the Chatbot

Below the script source, add the initialization block. Replace 'your_chatbot_id' with the actual ID of your chatbot to link it to your specific instance.

Customizing the Chatbot Widget

Enhance the user experience by customizing the chatbot's appearance and functionality:

Set the Theme

Choose a color theme that matches your brand or website design by setting the theme parameter in the Chatbot.init() method.

Define the Language

Specify the language for chatbot communications to cater to your audience, enhancing accessibility and comprehension.

Remember to test the chatbot in different environments to ensure it functions correctly across all platforms and devices.

Best Practices

Ensure optimal performance and user experience with these best practices:

  • Efficient Script Loading: Load scripts efficiently to minimize impact on page load times.
  • Comprehensive Testing: Test the chatbot thoroughly in various browsers and devices to ensure consistent functionality.

Troubleshooting

Common issues and their solutions:

  • Chatbot Not Appearing: Verify that the chatbot ID is correct and check for JavaScript errors in your browser's console.
  • Script Errors: Confirm the script source URL is correct. If issues persist, check for network problems that might prevent the script from loading.

Warning: Incorrect API keys or chatbot IDs can prevent your chatbot from loading. Double-check your credentials if you experience issues.

By following this guide, you can successfully integrate your Resinq chatbot into your website, enhancing user interaction and availability. This not only improves user engagement but also provides vital support directly through your website.