nextjs-notion-starter-kit icon indicating copy to clipboard operation
nextjs-notion-starter-kit copied to clipboard

Published 20 hours ago • verified publisher icon transitive-bullshit

insert ChatWoot JS

Open JOduMonT opened this issue 3 years ago • 1 comments
trafficstars

Description

I try to insert ChatWoot like this: https://www.chatwoot.com/docs/product/channels/live-chat/integrations/nextjs/ but as a poor dev; I'm simply unable to understand where and how to add this code.

I tried, as @Ashinch mentioned, to inject the code into pages/_document.tsx unsuccessfully. Originally posted by @transitive-bullshit in https://github.com/transitive-bullshit/nextjs-notion-starter-kit/issues/126#issuecomment-948785460

Also,; I presume I should pass, at least my websiteToken as an environment, but how ??

components/ChatwootWidget.js

import React from 'react';

class ChatwootWidget extends React.Component {
  componentDidMount () {
    // Add Chatwoot Settings
    window.chatwootSettings = {
      hideMessageBubble: false,
      position: 'right', // This can be left or right
      locale: 'en', // Language to be set
      type: 'standard', // [standard, expanded_bubble]
    };

    // Paste the script from inbox settings except the <script> tag
    (function(d,t) {
      var BASE_URL="<your-installation-url>";
      var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
      g.src=BASE_URL+"/packs/js/sdk.js";
      s.parentNode.insertBefore(g,s);
      g.async=!0;
      g.onload=function(){
        window.chatwootSDK.run({
          websiteToken: '<your-website-token>',
          baseUrl: BASE_URL
        })
      }
    })(document,"script");
  }

  render () {
    return null;
  }
}

export default ChatwootWidget

2. I try to add in pages/_documents.tsx

import * as React from 'react'
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { IconContext } from '@react-icons/all-files'
import ChatwootWidget from '../components/ChatwootWidget'

export default class MyDocument extends Document {
  render() {
    return (
      <IconContext.Provider value={{ style: { verticalAlign: 'middle' } }}>
        <Html lang='en'>
          <Head>
            <link rel='shortcut icon' href='/favicon.ico' />
            <link
              rel='icon'
              type='image/png'
              sizes='32x32'
              href='favicon.png'
            />

            <link rel='manifest' href='/manifest.json' />
          </Head>

          <body>
            <script
              dangerouslySetInnerHTML={{
                __html: `
/** Inlined version of noflash.js from use-dark-mode */
;(function () {
  var storageKey = 'darkMode'
  var classNameDark = 'dark-mode'
  var classNameLight = 'light-mode'
  function setClassOnDocumentBody(darkMode) {
    document.body.classList.add(darkMode ? classNameDark : classNameLight)
    document.body.classList.remove(darkMode ? classNameLight : classNameDark)
  }
  var preferDarkQuery = '(prefers-color-scheme: dark)'
  var mql = window.matchMedia(preferDarkQuery)
  var supportsColorSchemeQuery = mql.media === preferDarkQuery
  var localStorageTheme = null
  try {
    localStorageTheme = localStorage.getItem(storageKey)
  } catch (err) {}
  var localStorageExists = localStorageTheme !== null
  if (localStorageExists) {
    localStorageTheme = JSON.parse(localStorageTheme)
  }
  // Determine the source of truth
  if (localStorageExists) {
    // source of truth from localStorage
    setClassOnDocumentBody(localStorageTheme)
  } else if (supportsColorSchemeQuery) {
    // source of truth from system
    setClassOnDocumentBody(mql.matches)
    localStorage.setItem(storageKey, mql.matches)
  } else {
    // source of truth from document.body
    var isDarkMode = document.body.classList.contains(classNameDark)
    localStorage.setItem(storageKey, JSON.stringify(isDarkMode))
  }
})();
`
              }}
            />
            <Main />

            <NextScript />
            <ChatwootWidget />
          </body>
        </Html>
      </IconContext.Provider>
    )
  }
}
  • but nothing appear on my website (not even in the code)
  • but I have no error on vercel side
  • but it work with my Hugo website

JOduMonT avatar Aug 02 '22 04:08 JOduMonT

Hey;

I understand my question is probably super boring and generic, with an easy solution which I can't figure, so if one of you could help me by pointing at least what I have to learn and read to figure it that would be wonderful and in long term I might even being able to contribute to this project.

my plan is to integrate stuffs like

1st

  • ChatWoot
  • Commento
  • Matamo
  • ... Which I'm able to integrate with Hugo because it's simply cut and pasting a JS at the bottom How could I do something similar with NextJS, where it would be the best to integrate it inside this project?

2nd

  • I would like to translate that in French
  • or even so, make it possible to support multilanguage. What is the best approach for that ?

JOduMonT avatar Aug 18 '22 08:08 JOduMonT