Rocketspark allows you to add HTML code to your website using a code block. It’s a handy way to add something extra to your page, like an email signup form, a booking widget, a calendar, or a bit of custom styling that the Rocketspark editor doesn't do out of the box.
How to add a code block
- Open the page you want to edit and add a new block in the stack where you'd like your code to sit.
- Choose Code block.
Paste or type your code. The editor colours different parts of your code to make it easier to read. That's just for you, it doesn't change how the code runs.
If the editor spots something worth knowing about, a message will appear above the Save button. Have a read of it (we explain each one below).
Click Save, then Publish to see it live on your website.
What the alert messages mean in my code block
When you save a code block, the editor checks your code first. If all is well, you won't see anything. If it notices something, you'll get one of the messages below.
Styling that affects the whole page
What it means: Your code includes styling (CSS) written for general things like all headings, all links, all buttons, or the page background. Because it's not tied to just this block, it can reach out and change those same things everywhere else on the page.
What to do: Most of the time this is completely fine and exactly what you wanted, so go ahead and save. Then scroll through the page and check that nothing else has shifted, changed colour, or changed font. If something has, the easiest fix is to ask whoever wrote the code (or your AI assistant) to make the styling only apply to this block. If you'd rather not touch the code, just remove the block and the page goes back to how it was.
Broken or unfinished code
What it means: The code looks incomplete. Usually that's a tag that's been opened but never closed, like a <script> or <div> without its matching </script> or </div>. It often happens when a copy and paste gets cut off part way, or an AI assistant stopped generating before it finished.
What to do: Check that you've copied the whole thing, right to the very end. Go back to where the code came from and copy it again, making sure you grab everything. If an AI wrote it, ask it to give you the complete code again. You can also paste it into a free HTML validator to spot exactly where the problem is.
Whole page instead of a snippet
What it means: Your code includes the parts that make up an entire web page, like <html>, <head>, and <body> tags. A code block is meant for a small piece that sits inside your page, not a whole page of its own. Nesting a complete page inside another page confuses the editor and can stop it working.
What to do: Don't save it as is. You only need the piece that does the actual work, which is usually the bit sitting between the <body> and </body> tags. If an AI wrote the code, tell it you're pasting into a code block on an existing website and you only need a snippet, not a full page. It'll know what you mean. If you got the code from another tool, look for an "embed" option rather than a full page export.
Tips for pasting code with confidence
-
Snippets, not pages. A code block should hold one small piece of code. If what you've got starts with
<!DOCTYPE html>or<html>, it's too much. - Copy the lot. Make sure you've grabbed the code from the very first character to the very last. Half a snippet is the most common cause of the broken code message.
- Give your AI assistant the context. If you're asking an AI to write code, tell it you're pasting into a code block on an existing Rocketspark website and you only need the snippet. Ask it to keep any styling scoped to that block only. You'll get much tidier results.
- Check the page after saving. Scroll through once to make sure everything around the block still looks the way you expect, especially if you saw the whole-page styling message.
- Easy to undo. If something doesn't look right, you can edit the code or delete the block and your page goes back to normal. Nothing is permanent until you publish.
-
Secure content only. Code that loads something from an address starting with
http://(nothttps://) may be blocked by your browser and show as blank. Check the code is pulling fromhttps://addresses, or go back to the tool it came from and look for a secure version. - Test the code elsewhere if it's not working. If a widget isn't showing, paste the code into a free HTML validator. If it has errors there, it won't work on Rocketspark either, and the fix needs to happen where the code came from.
My Custom Code isn't displaying. Why is this?
The most common reason for this is that there is a mix-up of non-secure content on a secure page. As when you are logged in to Dashboard you are viewing your website on a secure URL like https://mywebsite.rocketspark.com. The https:// part at the start means this is secure!
The code that you have installed might be pulling in content from a non-secure URL that begins with http://. Your web browser sees this as a security issue and blocks this content.
You can try tweaking your code to use https but not all widgets are built to handle this. The other option is to set your site live and view it on the non-secure URL http://mywebsite.rocketspark.com (logged out), or view it on your live domain name if you have already upgraded.
If the HTML code does not work through Rocketspark, you may want to check if there are any errors with this code. Such as using an HTML Validator. If the code does not work here, it also will not work on Rocketspark so you will need to go back to the platform you received the code from to double-check any errors.
Need a hand?
Custom code can be a bit of a puzzle, and you don't have to solve it on your own. If you're stuck, not sure what a message means, or just want someone to look over your code before you save it, email us at support@rocketspark.com. Send through the code you're trying to add and a link to the page, and we'll help you get it sorted.