ChatBot not loading

Dduduk1 My chatbot is not appearing in my Shopify store, I see that the javascript is lo...

T

Tico | Voiceflow Assistant•2/22/24, 7:47 PM

It seems like you're having trouble with the chatbot not appearing on your Shopify store. Here are a few things you could check:

Ensure that the JavaScript code is correctly implemented. The
```
chat.load()
```
```
chat.load()
```
function should be used to load the agent by setting the project ID, the runtime URL, and a version ID. Here's an example:

window.voiceflow.chat.load({
  verify: {
    projectID: "YourProjectID"
  },
  url: "https://general-runtime.voiceflow.com",
  versionID: "production"
});

window.voiceflow.chat.load({
  verify: {
    projectID: "YourProjectID"
  },
  url: "https://general-runtime.voiceflow.com",
  versionID: "production"
});

window.voiceflow.chat.load({
  verify: {
    projectID: "YourProjectID"
  },
  url: "https://general-runtime.voiceflow.com",
  versionID: "production"
});

window.voiceflow.chat.load({
  verify: {
    projectID: "YourProjectID"
  },
  url: "https://general-runtime.voiceflow.com",
  versionID: "production"
});

If you want the chat widget to automatically open, you can use the
```
chat.open()
```
chat.open()
```
chat.open()
```
chat.open()
function like this:

window.voiceflow.chat.load({
  verify: {
    projectID: "YourProjectID"
  },
  url: "https://general-runtime.voiceflow.com",
  versionID: "production"
}).then(() => {
  window.voiceflow.chat.open();
});

window.voiceflow.chat.load({
  verify: {
    projectID: "YourProjectID"
  },
  url: "https://general-runtime.voiceflow.com",
  versionID: "production"
}).then(() => {
  window.voiceflow.chat.open();
});

window.voiceflow.chat.load({
  verify: {
    projectID: "YourProjectID"
  },
  url: "https://general-runtime.voiceflow.com",
  versionID: "production"
}).then(() => {
  window.voiceflow.chat.open();
});

window.voiceflow.chat.load({
  verify: {
    projectID: "YourProjectID"
  },
  url: "https://general-runtime.voiceflow.com",
  versionID: "production"
}).then(() => {
  window.voiceflow.chat.open();
});

You can also trigger a specific intent with the
```
chat.interact()
```
chat.interact()
```
chat.interact()
```
chat.interact()
function:

window.voiceflow.chat.load({
  verify: {
    projectID: 'YourProjectID'
  },
  url: 'https://general-runtime.voiceflow.com',
  versionID: 'production'
}).then(() => {
  setTimeout(function () {
    window.voiceflow.chat.open();
  }, 1000);
  setTimeout(function () {
    window.voiceflow.chat.interact({
      type: "intent",
      payload: {
        intent: {
          name: "account_services"
        },
        entities: []
      }
    })
  }, 2000);
});

window.voiceflow.chat.load({
  verify: {
    projectID: 'YourProjectID'
  },
  url: 'https://general-runtime.voiceflow.com',
  versionID: 'production'
}).then(() => {
  setTimeout(function () {
    window.voiceflow.chat.open();
  }, 1000);
  setTimeout(function () {
    window.voiceflow.chat.interact({
      type: "intent",
      payload: {
        intent: {
          name: "account_services"
        },
        entities: []
      }
    })
  }, 2000);
});

window.voiceflow.chat.load({
  verify: {
    projectID: 'YourProjectID'
  },
  url: 'https://general-runtime.voiceflow.com',
  versionID: 'production'
}).then(() => {
  setTimeout(function () {
    window.voiceflow.chat.open();
  }, 1000);
  setTimeout(function () {
    window.voiceflow.chat.interact({
      type: "intent",
      payload: {
        intent: {
          name: "account_services"
        },
        entities: []
      }
    })
  }, 2000);
});

window.voiceflow.chat.load({
  verify: {
    projectID: 'YourProjectID'
  },
  url: 'https://general-runtime.voiceflow.com',
  versionID: 'production'
}).then(() => {
  setTimeout(function () {
    window.voiceflow.chat.open();
  }, 1000);
  setTimeout(function () {
    window.voiceflow.chat.interact({
      type: "intent",
      payload: {
        intent: {
          name: "account_services"
        },
        entities: []
      }
    })
  }, 2000);
});

Please ensure that you replace "YourProjectID" with your actual project ID. If the issue persists, it might be due to a more complex problem that the community members could help you with.

Sources:

S

skinny-azureOP•2/22/24, 8:59 PM

It appears like this:

S

skinny-azureOP•2/22/24, 8:59 PM

window.voiceflow.chat.load({
verify: {
projectID: "65c9009e8c45dbdd731cc3b9"
},
url: "https://general-runtime.voiceflow.com",
versionID: "production"
}).then(() => {
window.voiceflow.chat.open();
});
Promise {<pending>}[[Prototype]]: Promisecatch: ƒ catch()constructor: ƒ Promise()finally: ƒ finally()then: ƒ then()Symbol(Symbol.toStringTag): "Promise"[[Prototype]]: Object[[PromiseState]]: "fulfilled"[[PromiseResult]]: undefined

S

skinny-azureOP•2/22/24, 8:59 PM

Promise {<pending>}
[[Prototype]]
:
Promise
catch
:
ƒ catch()
constructor
:
ƒ Promise()
finally
:
ƒ finally()
then
:
ƒ then()
Symbol(Symbol.toStringTag)
:
"Promise"
[[Prototype]]
:
Object
[[PromiseState]]
:
"fulfilled"
[[PromiseResult]]
:
undefined

S

skinny-azureOP•2/22/24, 9:01 PM

Still not appear without any error

S

skinny-azureOP•2/22/24, 9:02 PM

So it loads but the widget doesn't show

N

NiKo | Voiceflow•2/23/24, 12:50 PM

Double check on your end where those extra promise lines are coming from (right after the chat widget snippet code).

S

skinny-azureOP•2/23/24, 2:07 PM

the problem is not on our code, the promise lines are fine, you can check the code I left as well

N

NiKo | Voiceflow•2/23/24, 2:17 PM

If this is related to an extension you're loading on Shopify, check this thread:
❓┃helpI need help with the widget that I want to deploy on shopify

If it's because of your template, this one:
https://discord.com/channels/1079548823610871889/1192322706524356778

S

skinny-azureOP•2/23/24, 6:42 PM

https://7965ac-2.myshopify.com/

S

skinny-azureOP•2/23/24, 6:43 PM

we didnt saw any conflict within shopify with any extension

S

skinny-azureOP•2/23/24, 6:43 PM

the css sugested didnt made any diference: <style>
#voiceflow-chat {
display: block !important;
}
</style>

S

skinny-azureOP•2/23/24, 6:44 PM

can you please check on our site if you see any strange thing

S

skinny-azureOP•2/23/24, 6:44 PM

thanks

S

skinny-azureOP•2/26/24, 12:02 PM

hello?