deep-jade
deep-jade2y ago

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>
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?