like-gold
like-gold•16mo ago

VF font and size

I just published my chat bot in Shopify, but I was wondering, is there a way to change it's font style and size. It doesn't look that good in my store.
2 Replies
Tico | Voiceflow Assistant
Tico | Voiceflow Assistant•16mo ago
To change the font style and size of your Voiceflow chat widget on Shopify, you can use custom CSS. Here’s how you can do it: 1. Create a Custom CSS File: - Create a CSS file (e.g., chatstyle.css) and upload it to your server or a hosting service. 2. Add Custom CSS Rules: - In your chatstyle.css, you can add CSS rules to target the chat widget elements. For example: 
     /* Change font style and size for chat messages */
     .vfrc-message--chat {
       font-family: 'Arial', sans-serif;
       font-size: 16px;
     }

     /* Change font style and size for chat input */
     .vfrc-input--chat {
       font-family: 'Arial', sans-serif;
       font-size: 16px;
     }
     
     /* Change font style and size for chat messages */
     .vfrc-message--chat {
       font-family: 'Arial', sans-serif;
       font-size: 16px;
     }

     /* Change font style and size for chat input */
     .vfrc-input--chat {
       font-family: 'Arial', sans-serif;
       font-size: 16px;
     }
3. Update Chat Widget Code: - Update your chat widget integration code to include the custom CSS file. Here’s an example of how to do it: 
     <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: 'xxxxxxx', url: 'general-runtime.voiceflow.com', versionID: 'production' },
             assistant: 'stylesheet.mywebsite.com/chatstyle.css'
           });
         };
         v.src = 'https://cdn.voiceflow.com/widget/bundle.mjs';
         v.type = 'text/javascript';
         s.parentNode.insertBefore(v, s);
       })(document, 'script');
     </script>
     
     <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: 'xxxxxxx', url: 'general-runtime.voiceflow.com', versionID: 'production' },
             assistant: 'stylesheet.mywebsite.com/chatstyle.css'
           });
         };
         v.src = 'https://cdn.voiceflow.com/widget/bundle.mjs';
         v.type = 'text/javascript';
         s.parentNode.insertBefore(v, s);
       })(document, 'script');
     </script>
4. Deploy and Test: - Deploy your updated code to your Shopify store and test to ensure the changes are applied correctly. For more detailed customization options, you can refer to the Voiceflow Chat Widget Documentation.
like-gold
like-goldOP•16mo ago
doesn't work 😦

Did you find this page helpful?