search

Yeldaai / chat-plugin

Yelda Chat Plugin
MIT License
0 stars 0 forks source link

Uncaught TypeError: Cannot read property 'appendChild' of null #51

Closed meelie closed 4 years ago

meelie commented 4 years ago

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
  4. 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 4 years ago

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>
  2. 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"
  3. 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