Ddry-scarlet
Using javascript to add title attributes to Voiceflow chat after loading for accessibility
Hello, I've tried adding some title attributes to the voiceflow dialog close, minimize, and launch buttons in order to provide compatibility for screen readers, but when I try this script I am unable to add the attribute. I am not really a developer so I might be going at this completely wrong <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: '6546a5bd7e31c10008fce2bc' },
url: 'https://general-runtime.voiceflow.com',
versionID: 'production'
});
};
// Wait for the chat widget to fully load
setTimeout(function() {
// Example: Modify alt text of buttons. This requires you to know the structure of the chatbot's HTML.
// This is a hypothetical example, as actual implementation would depend on the generated DOM of the Voiceflow widget.
var closeButton = document.getElementsByClassName('c-dzcdPv vfrc-header--button c-dxAZjf');
closeButton.addAttribute('title', 'Close Chat Button');
// Or, if you're trying to edit text, not alt attribute (since buttons usually don't have alt attributes)
closeButton.textContent = 'close chat window button';
);
}, 3000); // Adjust delay as needed to ensure widget is fully loaded
};
v.src = "https://cdn.voiceflow.com/widget/bundle.mjs"; v.type = "text/javascript"; s.parentNode.insertBefore(v, s);
})(document, 'script');
// };
</script>
(function(d, t) {
var v = d.createElement(t), s = d.getElementsByTagName(t)[0];
v.onload = function() {
window.voiceflow.chat.load({
verify: { projectID: '6546a5bd7e31c10008fce2bc' },
url: 'https://general-runtime.voiceflow.com',
versionID: 'production'
});
};
// Wait for the chat widget to fully load
setTimeout(function() {
// Example: Modify alt text of buttons. This requires you to know the structure of the chatbot's HTML.
// This is a hypothetical example, as actual implementation would depend on the generated DOM of the Voiceflow widget.
var closeButton = document.getElementsByClassName('c-dzcdPv vfrc-header--button c-dxAZjf');
closeButton.addAttribute('title', 'Close Chat Button');
// Or, if you're trying to edit text, not alt attribute (since buttons usually don't have alt attributes)
closeButton.textContent = 'close chat window button';
);
}, 3000); // Adjust delay as needed to ensure widget is fully loaded
};
v.src = "https://cdn.voiceflow.com/widget/bundle.mjs"; v.type = "text/javascript"; s.parentNode.insertBefore(v, s);
})(document, 'script');
// };
</script>
