How to use custom HTML, CSS, and JavaScript in Kopage

The classic Kopage website builder allows you to use your own HTML, CSS, and JavaScript code in addition to the integrated functions.

This allows you to embed external content, customize certain layouts, or add functions for which Kopage itself does not provide a suitable module.

Custom code offers additional possibilities, but also requires appropriate caution. Faulty or untested code can affect the appearance, functionality, performance, security, or data privacy of your website.

Briefly explained: For most normal Kopage websites, you do not need your own code. You should use HTML, CSS, or JavaScript primarily when the built-in features are not sufficient for a specific requirement.

What is custom code in Kopage? #

Kopage is fundamentally designed to create websites without any programming knowledge.

Pages, texts, images, forms, and numerous other features can be managed via the visual website builder.

For special requirements, however, the classic Kopage Website Builder also supports custom HTML, CSS, and JavaScript code.

The three technologies fulfill different tasks:

HTML
→ Structure and content

CSS
→ Design and presentation

JavaScript
→ Behavior and additional functions

This distinction is important before you add your own code to your website.

When do I need my own code? #

Custom code can be useful if a desired function cannot be implemented with standard Kopage tools.

Typical use cases include, for example:

• Embedding an external widget,
• Integration of an external service,
• custom CSS adjustments,
• additional HTML content,
• or a special JavaScript function.

If Kopage already has a suitable built-in function for your task, it is often the simpler and more maintainable solution.

Practical Tip: First check whether Kopage already offers the desired function itself. Custom code should close a specific gap and not replace an existing builder function without necessity.

What is HTML? #

HTML stands for HyperText Markup Language and describes the structure of a webpage's content.

A very simple example is:

<h2>Our opening hours</h2>
<p>Monday to Friday: 08:00 AM to 05:00 PM</p>

The browser interprets the HTML elements and renders them as a heading and a paragraph.

For normal headings and texts, however, you don't need to write HTML yourself in Kopage. The website builder's standard editing functions are available for this.

When is custom HTML useful? #

Custom HTML becomes interesting, for example, when an external provider supplies ready-made embedding code or when a special structure is needed that cannot be reasonably mapped using normal Kopage features.

An external service could, for example, provide code like this:

<div class="example-widget">
    External content
</div>

This is just a simplified example and not an actual widget to be integrated.

Do not misuse HTML for routine page maintenance #

Just because HTML can be used, you shouldn't create all normal page content by hand with it.

Text, images, and normal page areas can be managed more easily using the provided Copage functions.

We explain how to edit normal content under Create content with Kopage: editing content blocks, texts, and images.

What is CSS? #

CSS stands for Cascading Style Sheets and is used for the visual styling of HTML elements.

This can be used, for example, to influence spacings, font sizes, borders, or other display characteristics.

A simplified example:

.hinweis {
    font-weight: bold;
    padding: 20px;
}

This CSS would, among other things, render elements with the corresponding class in bold and add padding to them.

When is custom CSS useful? #

Custom CSS can be helpful if you need targeted visual customization that goes beyond Kopage's normal design options.

Before using CSS, however, you should check whether the desired change can already be implemented using the existing design and template settings.

We cover the standard design options under Customizing Kopage template and design: Colors, fonts, header, and footer.

Important: Do not use CSS unnecessarily for settings that Kopage already provides via its design interface. Changes made using the built-in functions are usually easier to understand and manage for future adjustments.

CSS can affect multiple areas at the same time #

CSS uses selectors. Depending on how general a selector is formulated, a rule can change not just a single element, but many areas of the website.

A very general CSS rule can therefore unintentionally affect other pages or elements.

Test individual CSS adjustments carefully and check more than just the place you originally wanted to change.

Check changes across multiple pages #

If your CSS affects common classes or page elements, you should check multiple areas of the website after making a change.

These include in particular:

Home page
Important subpages
Navigation
Forms
Blog
Shop
Footer
Smartphone view

An adjustment that looks good on a single page can have unexpected effects elsewhere.

What is JavaScript? #

JavaScript is a programming language that can be executed in the browser and enables interactive or dynamic features.

JavaScript can, for example, respond to user actions, load external functions, or dynamically change content.

A greatly simplified example:

<script>
console.log('Beispiel');
</script>

This example is for illustrative purposes only and has no practical use for a normal Jimdo website.

Use JavaScript with extreme caution #

JavaScript has significantly more possibilities than a simple CSS styling rule.

Faulty code can impair functions, cause error messages, or collide with existing JavaScript on the website or of an external service.

Therefore, only include JavaScript whose origin and purpose you know.

Attention: Never copy JavaScript from forums, comments, unknown websites, or other untrusted sources into your website without checking it first. JavaScript can do far more than just change the appearance of a page.

What is an embed code? #

Many external services provide a so-called embed or embedding code.

This allows external content to be displayed within a website or an external function to be loaded.

Depending on the provider, such a code can contain HTML, JavaScript, or a combination of both.

Typical examples can include external booking functions, forms, calendars, videos, rating services, or other widgets.

Only use the embed code from the actual provider #

If you want to integrate an external service, you should copy the code provided for that purpose directly from the official management interface or documentation of that service.

Do not use just any code from an old blog post or forum just because it mentions the name of the desired service.

Third-party providers can change their embedding methods over time.

Prioritize existing CoPilot features #

For various frequently used external content, Kopage already offers suitable functions.

For example, we cover Google Maps, YouTube, and social media links under Embed Google Maps, YouTube, and social media into Kopage.

If such an integrated option is sufficient for your use case, you do not need to use your own embed code additionally.

Where to insert own code? #

For HTML, CSS, or JavaScript, use exclusively the designated functions of the classic Kopage Website Builder.

Which area is suitable depends on whether the code affects a specific page content, the design, or an external function.

Do not insert code haphazardly into normal text fields.

Important: HTML, CSS, and JavaScript are different types of code. CSS code does not automatically belong in the same field as an HTML embed, and JavaScript should only be used where the corresponding code type is intended.

Understand code before pasting #

You don't have to be able to program every detail of a complex integration yourself. However, you should at least know the purpose of the inserted code and which vendor it comes from.

For an external widget, for example, you should be able to answer:

Which provider does the code come from?
What is being embedded on my website?
Are external servers contacted?
Is data transmitted?
Does the function require cookies?
Can I remove the code again later?

If these questions are completely unclear to you, you should not deploy the code to a production website without checking it first.

Backup existing code before making changes #

If you want to change already working custom code, back up the previous version first.

This can mean, for example, that you save the previous code in a local text file before you modify it.

If the new version causes issues, this makes it easier for you to revert to the previous state.

Practical Tip: When dealing with more complex code, change as few things as possible at the same time. If an error occurs afterward, the cause is much easier to isolate.

Using comments in your own code #

If you maintain CSS or other code yourself, short comments can help you understand the purpose of individual adjustments later on.

A CSS example:

/* Spacing for special notice area */
.hinweis {
    padding: 20px;
}

This is particularly helpful when several individual customizations have accumulated over a longer period of time.

Do not insert code multiple times #

If an integration is not immediately visible, you shouldn't simply insert the same code multiple times in different places.

This can cause external scripts to be loaded multiple times or functions to be executed multiple times.

Check instead first whether the code was inserted in the correct place and whether the page in question has been published or updated.

Consider external code and performance #

External scripts and widgets can load additional files and data from third-party servers.

The more external services are integrated, the more additional resources may be required when loading the page.

This can affect the loading time and behavior of the website.

Therefore, use external integrations purposefully and remove features that no longer provide any actual value.

Not every widget is worth its effort #

An additional widget can be visually interesting, but at the same time it can load external scripts, transmit data, and cause additional maintenance effort.

Therefore, ask yourself before integration whether the feature is really relevant to your visitors.

A simple link to an external service can in some cases be more sensible than its full embedding.

Check own code and responsive design #

Kopage itself is designed for responsive websites. However, custom inserted code does not automatically have to work correctly on every screen as well.

For example, an external widget may have a fixed width and thus extend beyond the visible area on a smartphone.

Therefore, test individual code on desktop, tablet, and smartphone.

For further information on mobile display, please visit Responsive Design: Optimizing Kopage website for smartphones and tablets.

Use fixed widths with caution #

When writing your own HTML or CSS, you should pay special attention to rigid size specifications.

An element with a fixed large width can cause problems on smaller devices.

Responsive design, on the other hand, takes into account that different screen sizes are available.

Custom Code and Data Privacy #

Special attention is required for external JavaScript and embed code.

An integrated third-party provider can establish a connection to external servers when the page is loaded and process data in the process.

This can be relevant, for example, in analytics, mapping, video, chat, booking, or social media services.

Important: The fact that an external service can be technically integrated via code does not automatically mean it can be used without further data protection measures.

Consider consent solution #

If an external service sets cookies or uses other technologies that require consent, a corresponding consent configuration may be required.

Whether and what requirements apply depends on the service used, your configuration, and the legal regulations applicable to your website.

Check this before publishing a corresponding integration.

Custom code and security #

Code fundamentally has the ability to influence the behavior of a website.

Therefore, only use code from trusted sources and remove integrations that are no longer needed.

You should be especially critical if an unknown person asks you to insert code whose function you cannot understand.

Attention: Never insert code on your website just because someone claims it is necessary for „SEO,“ „Google verification,“ „security,“ or a supposedly necessary repair. Check the origin and purpose first.

External services can change #

An integration can work today and cause problems later if the external provider changes its service, its URLs, or its embedding code.

Therefore, with external functions, you should consider that their operation is not entirely under your control.

If a widget suddenly stops working, also check whether the external provider has changed or discontinued its integration.

What to do if the website looks incorrect after a code change? #

If a rendering issue occurs immediately after a CSS or HTML change, you should first undo the most recent change.

If you have backed up the previous code, you can restore the working state.

Then check whether the website is displayed correctly again.

Do not change several other areas at the same time as long as the cause has not yet been clarified.

What to do if a function stops working after adding JavaScript code? #

First, remove or disable the most recently added JavaScript code and test the website again.

If the function subsequently works again, a connection to the inserted code is likely.

That does not necessarily mean the code is fundamentally flawed. There could also be a conflict with existing scripts or the way it is integrated.

Browser console for technical troubleshooting #

Advanced users can use their browser's developer tools to troubleshoot JavaScript issues.

The browser console can show indications of JavaScript errors or unloaded resources.

However, these messages are technical and must be interpreted in their respective contexts.

Note for advanced users: An error message in the browser console does not automatically mean that Kopage itself is the cause. The error can just as well originate from an external script, widget, or custom inserted code.

Test changes in a private browser window #

If you still see the previous display after a code change, a browser cache may be involved.

Test the page in a private browser window or on a second device if necessary.

This makes it easier to tell whether the change fundamentally does not work or if merely an older version is being displayed in the browser.

Custom code and search engine optimization #

Custom HTML code can affect the structure of a page. Flawed markup or content that is only available via complex external functions can therefore also have an impact on the technical quality of a website.

Furthermore, JavaScript should not be used to provide simple content in an unnecessarily complicated way when it can easily be displayed as normal page content.

We cover the general SEO basics under SEO with Kopage: Page titles, metadata, URLs, and search engine optimization.

Do not embed Google Analytics twice via arbitrary code #

If you have already integrated an external service via a dedicated CoPage function, you should not integrate it again unnecessarily using your own code.

Double integration can lead to multiple data collection or difficult-to-trace problems, among other things.

We cover the planned Google and Analytics functions under Google, Sitemap, Analytics and website statistics in Kopage.

When is it better to avoid writing your own code? #

Avoid custom code if you can understand neither its purpose nor its potential impact.

This applies especially to extensive JavaScript snippets of unknown origin.

Even if a desired function can already be implemented with normal Kopage tools, additional code often brings no advantage.

Own code should be documented #

If you use multiple individual adjustments, you should document what they are needed for.

A simple overview could look like this, for example:

Customization: Booking widget
Source: Booking system provider
Inserted for: Appointment page
Purpose: Online appointment booking

Customization: Custom CSS
Purpose: Special display of an information area
Changed: August 2026

Such documentation significantly facilitates later modifications and troubleshooting.

Check code after changes to the external service #

If an integrated service changes its configuration, you should check whether your previous embed code is still up to date.

Do not automatically replace existing code with a new version without first checking what changes the provider actually requires.

Back up website before major changes #

For more extensive adjustments, a current backup is generally advisable.

This applies especially when you make changes to a live website whose effects you cannot fully estimate.

While a backup does not replace careful work, it makes recovery easier if a major change causes unexpected problems.

Fully test after a code change #

After an individual adjustment, do not only check the immediately modified area.

A meaningful test includes:

open affected page
        ↓
test function
        ↓
check other important pages
        ↓
check navigation
        ↓
test forms
        ↓
check smartphone
        ↓
test second browser
        ↓
check public website

Common mistakes in own code #

Common problems include code from unknown sources, scripts inserted multiple times, incorrect insertion positions, and CSS rules that unintentionally modify multiple areas.

Even external widgets with fixed widths can cause issues on mobile devices.

Another common mistake is making multiple changes at once. If something stops working afterwards, it is hard to determine which change caused it.

Checklist before inserting custom code #

Does Kopage already offer a matching function?
        ↓
Is custom code really necessary?
        ↓
Is the source trustworthy?
        ↓
Do I understand the purpose of the code?
        ↓
Is existing code backed up?
        ↓
Data privacy checked?
        ↓
Code inserted in the correct place?
        ↓
Public website tested?
        ↓
Smartphone tested?
        ↓
Change documented?

What's next? #

Custom code and external integrations should not only work on a desktop screen.

Especially with custom modifications, it is important to carefully check the display on smartphones and tablets.

Therefore, we continue with Responsive Design: Optimizing Kopage website for smartphones and tablets.

Summary #

The classic Kopage website builder allows the use of custom HTML, CSS, and JavaScript code for requirements that go beyond the normal builder functions.

HTML describes content and structures, CSS influences the presentation, and JavaScript enables additional dynamic functions.

Use custom code only when there is a specific reason to do so, and prefer existing Kopage features if they already meet your requirement.

Only adopt external codes from trusted sources, back up existing customizations before making changes, and also consider performance, data privacy, and security with external integrations.

Then test changes on the published website and on different devices.

Custom code can usefully extend Kopage. However, the more individual the customization becomes, the more important clean documentation, controlled changes, and thorough testing become.