Yeldaai/chat-plugin

Uncaught TypeError: Cannot read property 'appendChild' of null

Closed this issue · 1 comments

meelie commented

Context
Thomas tried to add yelda webchat on SG wordpress and faced this issue.
Uncaught TypeError: Cannot read property 'appendChild' of null
image
image

Facts
I quickly checked the code and noticed that

  1. if i run in the console
yeldaChat.setupChat({
    'assistantSlug': 'krds',
 ....

it works
2. Code is in the header
3. the container is init like this

    this.parentContainer = document.body
  1. I asked @thomasgx to move the code out of the header, he put it in the body => it worked

=> DOM was not ready

My suggestion

  1. Repro it
  2. Fix it, maybe with DOMContentLoaded event ?
  3. Add test for this ?

Thanks

meelie commented

Same bug today with new client GL events
Thomas bug :
image (1)
What the debug say => document.body null because body is not loaded
image (2)

  1. Repro it (put setupChat code in
<head>
  1. Handle the issue
  • add missing check
  • if document.body is null, log "document.body is not ready, please use yelda.init instead of yelda.setupChat or move the code in the page body"
  1. Edit all the docs

Replace in yelda and webchat plugin

yeldaChat.setupChat({
  'assistantSlug':assistantSlug,
  'assistantId':assistantId,
  'assistantUrl':assistantUrl, // url https://app.yelda.ai
  'locale': 'fr_FR'}),
  'chatPath': '/chat',
  'isAdmin': true, // isAdmin boolean activate admin mode, default value is false
  'shouldBeOpened': true, // boolean open the chat window by default on loading the page if set to true
  'parentContainerId' : `chat_frame`, // (dom element id), if the 'container_id' does not exists in the dom, the iframe will be inserted into document body
  'isStartBtn': false, // set to true only if need to show start button
  'canBeClosed': false // used to toggle the visible state of close button, if parentContainerId provided 'canBeClosed' set to false

Note : you can replace _setupChat_ function by _init_ if you want to wait for window.onload event.

By

yeldaChat.init({
  assistantSlug: assistantSlug,
  assistantId: assistantId,
  assistantUrl: assistantUrl, // url https://app.yelda.ai
  locale: 'fr_FR',
  chatPath: '/chat',
  isAdmin: true, // isAdmin boolean activate admin mode, default value is false
  'shouldBeOpened': true, // boolean open the chat window by default on loading the page if set to true
  'parentContainerId' : `chat_frame`, // (dom element id), if the 'container_id' does not exists in the dom, the iframe will be inserted into document body
  'isStartBtn': false, // set to true only if need to show start button
  'canBeClosed': false // used to toggle the visible state of close button, if parentContainerId provided 'canBeClosed' set to false
})

To avoid issue with window.onload which might not be called when using JS Frameworks, you can also use `yeldaChat.setupChat(data)`, and even reset it with `yeldaChat.reset(data)`
  1. Add a test for the 2. fix