H

Voiceflow•2y ago

hidden-sapphire

Failed to load stylesheet

Hey guys, i'm really struggling with the changing the widget UI with a stylesheet.
If anyone could quickly review what i did and find what i did wrong, i'll be grateful.

This is my code snippet:

<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: '662154c2b58990e271028912' },
url: 'https://general-runtime.voiceflow.com',
versionID: 'production',
assistant: {
stylesheet: "https://raw.githubusercontent.com/OmriT123/RTL/main/stylesheet.css"
}
});
}
v.src = "https://cdn.voiceflow.com/widget/bundle.mjs";
v.type = "text/javascript";
s.parentNode.insertBefore(v, s);
})(document, 'script');
</script>

Basically, the stylesheet suppose to make the widget RTL, so this is the raw stylesheet content:

.vfrc-chat--dialog {
direction: rtl !important;
text-align: right !important;
}
.vfrc-message {
direction: rtl !important;
text-align: right !important;
}
.vfrc-user-response .vfrc-message {
direction: rtl !important;
text-align: right !important;
}
.vfrc-input input[type="text"] {
direction: rtl !important;
text-align: right !important;
}
.vfrc-input input[type="text"]::placeholder {
direction: rtl !important;
text-align: right !important;
content: 'תשאלי כל דבר';
}

It's not working. You can see the console message: "Failed to load stylesheet" in the attached image.

What am i missing? Do i have to use Base64 string?

Would really appreciate any help.
Thanks