1. Create a project

After completing the registration, you will be guided to create a project. Alternatively, you can click "Create Project" in the drop-down menu of the project name located in the upper left corner of the navigation.

2. Data Integration

2.1 if you are using HTML

Copy the SDK code, then add the code to the <head> tag of your website and run it to activate.
Integration code can be found in Project Settings -> Project Information.
After Paste

2.2 if you are using Google Tag Manager

Copy your project's API Key in your project settings page
Go to Google Tag Manager, import Stey Tag Template.tpl

2.3 if you are using Nuxt.js

Directly add script content to HTML using the 'head' property in nuxt.config.js

// nuxt.config.js 
export default { 
  // ... 
  head: { 
    script: [ 
      { 
        innerHTML: `// Paste your Stey Code here`, 
        type: 'text/javascript', 
        charset: 'utf-8' 
      } 
    ],
    __dangerouslyDisableSanitizers: ['script'], 
  }, 
  // ... 
}

Ensure that you have installed 'vue-meta' in your Nuxt.js project, as Nuxt.js relies on it to update the <head>

2.4 if you are using Next.js

In Next.js, we can inject <script> by creating a custom '_document.js' file and overriding the 'render()' method.

// pages/_document.js 
import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  render() {
    return ( 
      <Html> 
        <Head> 
          <script dangerouslySetInnerHTML={{
            __html: ` 
              // Paste your Stey Code here 
            ` }} /> 
        </Head>
        <body> 
          <Main /> 
          <NextScript /> 
        </body> 
      </Html> 
    ) 
  } 
} 

export default MyDocument

2.5 if you are using Vue.js (Vue3)

For Vue.js 3, you can directly add the <script> tag in 'public/index.html'

<!-- public/index.html --> 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <!-- ... other head elements ... --> 
  <script> 
    // Paste your Stey Code here 
  </script> 
</head> 
<body> 
  <div id="app"></div> 
  <!-- built files will be auto injected --> 
</body> 
</html>

2.6 if you are using Gatsby

In Gatsby, you can use the onRenderBody API in the gatsby-ssr.js file to add a script

// gatsby-ssr.js
export const onRenderBody = ({ setPreBodyComponents }) => {
  setPreBodyComponents([ 
    <script key="steyAIRecord" 
    dangerouslySetInnerHTML={{ 
      __html: ` 
        // Paste your Stey Code here 
        ` 
      }} 
    /> 
  ]) 
}

In these examples, we ensure that the script content is sent to the client alongside the initial page load by embedding it directly in the HTML. This is achieved by adding the <script> tag directly in the HTML <head> (for Nuxt.js and Next.js) or <body> (for Gatsby)

2.7 if you are using Shopify

2.8 Or you can invite an engineer to assist with integration:

You can send invitation to your engineer's email and click invite, the system will automatically send an invitation email.
After the engineer receives the invitation email, they can complete the registration as instructed in the email to access the project, and then go to Project Settings -> Project Information to obtain the SDK code for integration.

If you have any questions, feel free to contact customer service.

3. Test

After the SDK intergration, you can visit the site multiple times, with each visit lasting a bit longer like one minute, and then close the page.
You can wait for about 1 minute before going to Stey to refresh the page and check if any sessions have been generated.
If session records have been generated, this indicates that the integration has been successful.

4. If you have a problem

Click the right bottom purple button to contact us

If the reply is not timely, just send us email: frank@stey.ai