Webflow Integration

Webflow Integration

Step 1: Set Up Your Nexvio.ai Chatbot

To integrate your Nexvio.ai chatbot into your Webflow website, begin by logging into your Nexvio.ai account. If you haven’t already created an account, you can sign up for a free account. After signing in, you can configure your bot within the Nexvio.ai platform by uploading relevant data sources, such as FAQs, website content, or product information, which the bot can use to build its knowledge base.

Step 2: Generate and Copy Your Nexvio.ai Chatbot Embed Code

1. Every chatbot you create on Nexvio.ai has a unique embed code you can use to embed it on your website. Once you’ve set up your chatbot on Nexvio.ai, navigate to your Dashboard page, and select the specific bot you wish to integrate with your Webflow website.

2. Clicking on the bot should take you to the bot’s playground page. From there, proceed to the Connect tab.

3. Up next, a new page should come up, click on Copy Script to copy the code snippet.

Step 3: Add the Code to Your Webflow Site

1. Log in to your Webflow account and open the project you want to add your chatbot to.

2. Click on the Pages tab in the left sidebar.

3. Select the page where you want to add the chatbot (or select your base template if you want it to appear on all pages).

4. Click on Settings (gear icon) in the top right corner of the designer.

5. Navigate to the Custom Code tab.

6. Scroll down to the Footer Code section.

7. Paste the Nexvio.ai embed code that you copied in Step 2 into this section.

8. Click Save to apply the changes.

Step 4: Publish Your Webflow Site

1. Click the Publish button in the top-right corner of the Webflow designer.

2. Select the appropriate publishing option based on your needs (publish to live site, staging, etc.).

3. After publishing, visit your live Webflow website.

4. You should see the Nexvio.ai chat bubble in the bottom corner of your website.

5. Click on the chat bubble to test the functionality of your chatbot.

Step 5: Customize Your Chatbot

1. Go back to your Nexvio.ai dashboard.

2. Navigate to your bot’s settings by clicking on the bot and then the Settings tab.

3. Click on Chat Interface in the left sidebar.

4. Here you can customize the appearance of your chatbot to match your Webflow site’s branding:

   • Change the color scheme
   • Adjust the chat bubble icon
   • Customize welcome messages
   • Set up bot behavior

5. Save your changes and check your Webflow site again to see the updated appearance.

Congratulations, your Nexvio.ai chatbot is now live on your Webflow website!

Note: If you update your site’s design significantly, you may want to revisit the chatbot styling to ensure it continues to complement your website’s aesthetic. You can make these adjustments at any time through your Nexvio.ai dashboard.