Configuring Chatbot Parameters for Embedding

Customizing your Resinq chatbot by directly modifying the embedding parameters offers significant flexibility, allowing you to tailor the chatbot's functionality and appearance without accessing the dashboard. This guide provides detailed instructions on how to use these parameters effectively.

Flexibility in Configuration

Resinq provides the flexibility to configure your chatbot parameters either through a user-friendly UI or directly within the embed code. This approach is designed to cater to both non-technical users who prefer a graphical interface and developers who wish to integrate more deeply with custom setups.

Direct Configuration: You can update the chatbot parameters directly in the embed code, providing a seamless way to make changes on the fly and see immediate results on your website.

Accessing Embedding Settings

While you do not need to visit the Resinq dashboard to make these changes, the platform does offer guidance and the initial setup details:

Initial Setup

Obtain your base embed code from the Resinq dashboard when setting up your chatbot for the first time.

Modify Parameters

Adjust the parameters directly in the embed code as detailed below.

Configuring Chatbot Parameters

Here’s how you can adjust various parameters directly within your embedding script:

Chatbot.init({
  chatbotId: "your_chatbot_id",
  override: {
    theme: "dark",
    showDelay: 0,
    displayName: "Your Chatbot Name",
    initialMessages: ["Welcome! How can I assist you today?"],
    suggestions: ["FAQs", "Contact Support"],
    userMessageColor: "#F0F0F0",
    iconColor: "#FBBD07",
    footerText: "Powered by Resinq",
    inputPlaceholder: "Type your question...",
    avatar: "URL_to_avatar_image",
    icon: "URL_to_icon_image",
  },
});

Configuration Parameters

The following table lists and describes each configuration parameter you can adjust when embedding your Resinq chatbot:

Parameter	Type	Description
`id`	`string`	Unique identifier for the chatbot.
`initialMessages`	`string[]`	Array of messages the chatbot will initially display.
`suggestions`	`string[]`	Suggested responses displayed to the user.
`displayName`	`string`	Name displayed as the chatbot's title.
`theme`	`string`	Visual theme for the chatbot ('light' or 'dark').
`alignment`	`string`	Alignment of the chatbot on the page ('left', 'right', 'center').
`userMessageBackgroundColor`	`string`	Background color of user messages.
`userMessageTextColor`	`string`	Text color of user messages.
`botMessageBackgroundColor`	`string`	Background color of bot messages.
`botMessageTextColor`	`string`	Text color of bot messages.
`botPrimaryColor`	`string`	Primary color used in the chatbot theme.
`iconColor`	`string`	Color of the chatbot icon.
`footerText`	`string`	Text displayed in the chatbot footer.
`inputPlaceholder`	`string`	Placeholder text for the message input field.
`showDelay`	`number`	Delay in milliseconds before the chatbot becomes visible on the page.
`icon`	`string \| null`	URL of an image used as the chatbot icon.
`avatar`	`string \| null`	URL of an image used as the chatbot avatar.
`bot_id`	`string`	Identifier linked to the specific bot instance.

By configuring these parameters, you can ensure that the chatbot not only matches your brand's visual identity but also behaves in a manner that enhances user experience. Remember to test the chatbot thoroughly after applying new settings to ensure all customizations perform as expected.

Best Practices for Configuration

Consistent Updates: Regularly update your chatbot parameters to reflect changes in your website design or user interaction strategies.
Testing: Always test the chatbot on your website after making changes to ensure that all configurations are functioning as expected.

Troubleshooting

If adjustments do not appear to be effective:

Changes Not Reflecting

Chatbot Not Appearing

This flexibility in configuration allows you to seamlessly integrate and customize your Resinq chatbot to enhance user engagement without frequent visits to the backend dashboard, making it an efficient tool for dynamic website environments.