flat-fuchsia•16mo ago
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 ❤️
4 Replies
probably has the wrong content-type. Where are you hosting that file?
lol - GitHub
Try base64 encoding and get the URI version from: https://base64.guru/converter/encode/css
correct-apricot•16mo ago
The problem is with your URL. Use this URL for your stylesheet: https://yourusername.github.io/yourrepo/yourfile.css (e.g., https://randompenna.github.io/voiceflow/style.css), and make sure to enable GitHub Pages in your repository settings.
flat-fuchsiaOP•16mo ago
You guys are awesome, thank you so much. Both approaches work as intended