Disabling the ability to copy or select content on your website can help protect your text, images, and other media from being easily copied or plagiarized. While this method isn’t foolproof, it can act as a deterrent for most users. OzSpeed’s Website Builder allows you to add custom code to your site to prevent text selection and copying. Here’s how to do it step by step.
Step 1: Access the Website Editor #
To begin disabling copying or text selection, open the page editor in hPanel.
- Log in to hPanel at ozspeed.com.au.
- Go to Website Builder > Edit Site.
- Click on Website Settings in the top toolbar.
Tip: #
- Disabling text selection may impact the user experience for some visitors, so use this feature thoughtfully.
Step 2: Open the Custom Code Section #
You will need to add custom JavaScript or CSS code to disable content copying and selection.
How to Access Custom Code: #
- In the Website Settings panel, go to the Advanced Settings tab.
- Click on Custom Code.
- Open the Header Code or Global Code section to add your script.
Tip: #
- Adding the code to the global section will apply it across your entire website.
Step 3: Add JavaScript Code to Disable Copying #
JavaScript can be used to disable right-click, text selection, and keyboard shortcuts for copying.
JavaScript Code: #
htmlCopy code<script>
// Disable right-click
document.addEventListener("contextmenu", function(event) {
event.preventDefault();
});
// Disable text selection
document.addEventListener("selectstart", function(event) {
event.preventDefault();
});
// Disable copy keyboard shortcuts
document.addEventListener("keydown", function(event) {
if (event.ctrlKey && (event.key === "c" || event.key === "a")) {
event.preventDefault();
}
});
</script>
- Copy the code above.
- Paste it into the Custom Code section.
- Click Save.
Tip: #
- This script prevents users from right-clicking, selecting text, and using common copy shortcuts (Ctrl + C, Ctrl + A).
Step 4: Add CSS Code to Disable Text Selection (Optional) #
For a simpler approach, you can use CSS to prevent text selection without disabling right-click.
CSS Code: #
cssCopy code/* Disable text selection */
body {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
- Copy the CSS code above.
- Go to the Custom CSS section in Advanced Settings.
- Paste the code and click Apply.
Tip: #
- This method is less intrusive and only prevents text from being selected.
Step 5: Preview Your Changes #
Before publishing, preview your site to ensure the code is working correctly.
How to Preview: #
- Click Preview in the top toolbar.
- Try right-clicking, selecting text, and using copy shortcuts (Ctrl + C).
- Confirm that these actions are disabled.
Tip: #
- Use an incognito window or clear your browser cache to test the changes as a new visitor would.
Step 6: Publish the Changes #
Once you’re satisfied with the settings, publish your updates to make them live.
How to Publish: #
- Click Publish in the top right corner of the editor.
- Confirm your changes.
Tip: #
- Let your visitors know that copying is disabled to set clear expectations and deter attempts.
Troubleshooting Tips #
- Copy Protection Not Working on All Pages:
- Ensure you’ve added the code to the Global Code section for site-wide application.
- Clear your website cache in hPanel and your browser cache.
- Website Performance Issues:
- Check if the JavaScript code is causing any conflicts with other scripts on your site.
- Consider using only the CSS method if you experience performance issues.
- Impact on User Experience:
- Disabling right-click and text selection can frustrate some users, especially if they want to copy information for personal use or research. Consider adding a note or disclaimer about content protection.
Additional Tips: #
- Monitor Your Content: Even with these protections, determined users can still find ways to copy content. Use tools like Copyscape to monitor for plagiarism.
- Consider Watermarking Images: For additional image protection, add watermarks to your photos before uploading them.
- Use a Copyright Notice: Clearly state your copyright policy on your website to inform visitors that content copying is prohibited.