How to Use Custom Code

The Custom Code feature allows you to add your own CSS or script to customize the look and behavior of your announcement bar. This gives you more flexibility beyond the settings available in the app.

You can find the custom code configuration by scrolling all the way down the bar's configuration.

Note: This feature is ideal if you want to add unique effects, animations, or style adjustments. For advanced customizations, we recommend to work with developers since we do not offer a customization service.

Adding Your Own Custom Code

If you already have CSS or script you want to apply, you can paste it directly into the Custom Code box.

For styling, wrap your code in <style> tags:

<style>
 
</style>

For scripts, wrap your code in <script> tags:

<script>

</script>

Note: Custom code will run:

When the bar first loads
When AI-generated code is applied
When you click "Run custom code" (it does not run automatically as you type).

Using AI to Create Custom Code

You can now also generate code using AI to create custom effects or styles without needing coding knowledge. This tool can help you generate new or modify the existing custom code.

Create Custom Styles/Effects With AI

To create a custom code using AI:

Click the Generate code with AI button
Type what you want to achieve in the text area that appears (for example: "Animate snow falling in the foreground of the banner").
Click Generate code button. AI will create the code and apply it automatically on the bar so you can preview the result.

Improve or Modify Existing Code

If the effect looks close but needs adjustments:

Enter a new prompt (example: "Please increase the number of snowflakes.") while keeping the existing code in the box
Click Generate code button

The AI will update the code while preserving relevant existing code.

Note: If the result isn't what you expected, use the undo button, and redo button to re-apply the generated custom code.

Additionally, you need to remove all the existing custom codes if you wish to start a new prompt.

Need Assistance?

If you have questions, feel free to reach out to us at help@hextom.com and we're happy to help!