Usage with next.js

The tutorial will teach you how to integrate ciaociao message widget to your Next.js website.

Create new project

  1. Log in to ciaociao dashboard. Click Create new project
    1. notion image
 

2. After creating new project, click How to use . The page will provide the widget embeded link

notion image
 

3. The red square indicates the widget embedded link for your website

notion image
<script src="https://cdn.ciaociao.email/widget.js" data-pid="N_SalWMta1" />
 

Add the script to next.js

Add the script in the next/head

import Head from 'next/head'

function IndexPage() {
  return (
    <div>
      <Head>
				<script src="https://cdn.ciaociao.email/widget.js" data-pid="xKIJOd_pEw" />
      </Head>
      <p>Hello world!</p>
    </div>
  )
}

export default IndexPage
 

Spin up the Next.js website and your widget is there!

notion image
© Copyright 2021 ciaociao