Adding Custom CSS/JS in community group

Group admins can now inject custom JavaScript (JS), Cascading Style Sheets (CSS), and HyperText Markup Language (HTML) code into their groups. This allows for unprecedented levels of customizations

TABLE OF CONTENTS

• How to Customize Your Groups
• FAQs

How to Customize Your Groups

Follow these steps to add custom code to your groups:

1. Access Group Settings

As a group admin/owner, navigate to your group dashboard, and find the group you wish to customize. 

2. Go to Branding Options

Within the group settings menu, look for the "Branding" section. Click on it to open the branding options for your group.

3. Advanced Customization

In the Branding section, you'll find an "Advanced" tab or option (scroll to bottom). Select this to access the advanced customization settings where you can input custom HTML, CSS, and JS.

4. Adding Custom Code

• HTML: You can add custom HTML to modify the structure or content of your group's pages. This is ideal for adding custom headers, footers, or unique content blocks.
• CSS: Use CSS to alter the visual style of your group. This can include changes to colors, fonts, layouts, and more, allowing you to align the group's appearance with your brand or preferences.
• JS: JavaScript can be used to add interactive elements or functionality to your group. This could range from simple animations to complex features like custom forms or integrations.
  
  
  

5. Preview Your Changes

Before making your customizations live, take advantage of the preview feature. This allows you to see how your custom code affects the group's appearance and functionality, letting you make adjustments as needed without affecting the live site.

6. Go Live

Once you're satisfied with your customizations, save your changes to make them live for all group members. Enjoy your newly person

FAQs

Q: How do I check how my group looked before adding the code

• Check how the group looks without a CustomCode via this Link
• Check how the group looks with a CustomCode via this Link
  

Q: What should I do if I'm experiencing issues in a community after applying custom code?

A: If you encounter any problems within a community where custom HTML, CSS, or JavaScript has been implemented, it's important to isolate whether the issue is being caused by the custom code. To do this, you can temporarily disable the custom code and see if the problem still occurs. Simply add 'customCode=false' to the end of the community's URL in your browser's address bar and press Enter. This action deactivates the custom code for your current session, allowing you to check if the issue persists without the customizations. If the problem is resolved with custom code disabled, it indicates that adjustments to your custom code may be necessary.