How to Integrate Yellow AI with Next JS website

Channels
1

We have developed an e-commerce website for one of our clients in Next JS and suggested they use Yellow AI as a chatbot for the website.

But we are not able to integrate the same, please help us implement Yellow AI with NextJS as there is no documentation available, and it’s quite urgent.

2

Hi @shubham_saurabh

Have you had a chance to take a look at Web Widget docs.

You can have the script in any component of your nextJS app as you seem fit and take it one level further with custom payloads, authentication and other such functions.

Note: Make sure you swap the botID for your Production/Live bot

Please let me know if you’re facing any challenges with the bot script.

3

Hey @shubham_saurabh ,

You can add our script to any NextJS page using the steps below.

  1. Create a file called static/yellowai.js and paste our script. (You can remove the tags)
  2. You can now load this file on page/(page_name).(jsx|tsx) file like this
import Head from 'next/head';
import MyComponent from '../components/mycomponent';

export default () => (
  <div>
    <Head>
      <script type="text/javascript" src="/static/yellowai.js"></script>
    </Head>
    <MyComponent />
  </div>
)
3 Likes
4

Hey @gautham and @Adithya_N_R

The solution worked; thank you for the super quick TAT.

The challenge was with the Script Tag of Next JS (v12); it was not executing the script with dangerouslySetInnerHTML as we do for GA/GTM/MSC etc.

The way you suggested creating a static folder worked. I have created a static folder inside the public folder with the filename as instructed and then provided the file’s path.

Thank you very much, team for resolving this at god speed :slight_smile:

2 Likes