Clubspot’s Custom code component in the website builder is compatible with common generative AI tools. This can help produce custom page sections to your specifications without the need for any coding experience. Doing so requires access the the Clubspot website builder for your club as well as service like ChatGPT or Grok etc.
Start by launching the website editor and navigating to the page you want to add custom content to. In the left hand (hamburger) menu of the website editor click + Add New Page Section, and then select “Custom Code”.
Next, open up your prompt with the AI service you will be using. For the sake of this article we will be referring to a ChatGTP prompt. You will be using Chat GPT in the next steps to produce the custom code to drop into the Clubspot website builder.
The prompt for your chatbot is important to be able to produce compatible code that works well with the rest of the site. Use the below suggestions to produce that high quality code that you can use to make your custom sites!
If you want images included in your LLM generated page you will need to provide image links in your prompt so they know what to use. The best way to do this is from the Documents section of Clubspot.
Once you have your image urls you can provide with your prompt so that the LLM can plug those images into the custom code it creates.
Make sure to use this format when asking AI to create code for you:
<aside> ⌨️
Write me clean HTML with all CSS inline (use style="..." on elements, not <style> blocks, and no <body> tags) for a [component or element] that looks like [style details]. It should be [aligned/sized as needed], and responsive down to 320px width.
</aside>
The red text indicates essential elements that should be included verbatim in your prompts for them to work in the web builder. The green text represents sections you should customize to specify exactly how you want your element to appear. As long as you include the red portions, you can customize the other sections however you want. Here are some examples to help you get the most out of your custom code component.
Create a clean membership plans table with three options: Social, Full, and Junior. Each column should include the plan name, the monthly dues, and 3–4 benefits with ✓ icons. The table should have borders, alternating row colors, and a bold header row. Make it easy to read and professional looking. Write me HTML code with all CSS inline (use style="..." on elements, not <style> blocks, and no <body> tags) responsive to 320px width.
Result: