Need help by implementing my (styled) Chatbot to my website

Hey everyone,

I don't understand why I can't implement my chatbot in my website.

I want the chatbot to be embed with my customized styling from the widget area. I copy the code and implement it right before the closing body tag. But the chatbot is nowhere. So I did also implement this code: <div id="vf-chat-wrapper" style="width:100%;max-width:420px;height:100vh;"></div> - but nothing happened.

I have no idea, what I'm doing wrong. Is there someone, who can help me?

Thanks a lot

My code:

<script type="text/javascript">
(function(d, t) {
var v = d.createElement(t), s = d.getElementsByTagName(t)[0];
v.onload = function() {
window.voiceflow.chat.load({
verify: { projectID: 'XYZ' },
url: 'https://general-runtime.voiceflow.com',
versionID: 'production',
voice: {
url: "https://runtime-api.voiceflow.com"
},
render: {
mode: 'embedded',
target: document.getElementById(vf-chat-wrapper),
}
});
}
v.src = "https://cdn.voiceflow.com/widget-next/bundle.mjs"; v.type = "text/javascript"; s.parentNode.insertBefore(v, s);
})(document, 'script');
</script>