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!
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:
Write me HTML code with all CSS inline (use style="..." on elements, not <style> blocks, and no <body> tags) for a 3-tab section with rectangular tabs, a blue active highlight, and smooth transition between content. The first tab is titled “Brunch Hours” the second tab is titled “Lunch Hours” and the third tab is titled “Dinner Hours”. Make it responsive to 320px width.
Result:
Write me HTML code with all CSS inline (use style="..." on elements, not <style> blocks, and no <body> tags) for an iframe embed for a Google Map of San Francisco, 70% page width, responsive, with a thin rounded border. Make it responsive to 320px width.