> For the complete documentation index, see [llms.txt](https://codpat.gitbook.io/codpat-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codpat.gitbook.io/codpat-docs/how-to-make-tebex-integration.md).

# How to make tebex integration

## Step-by-step guide

{% embed url="<https://www.youtube.com/watch?v=MRsYcqqO0BI>" %}

{% hint style="info" %}
After making changes to **any page or asset**, always click **Save as Draft** in the Tebex editor.
{% endhint %}

{% hint style="info" %}
If you need any help during the setup process, you can join our [**Discord server**](https://discord.gg/CAgb7mvqpx) and get **free support** from our team.

We’ll be happy to assist you with the integration.
{% endhint %}

{% columns %}
{% column %}

<figure><img src="/files/Uq8AncQjnrY5pR3GcJQA" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

#### Install and Open Visual Studio Code

Download **Visual Studio Code** from the official website.

Install and launch Visual Studio Code on your computer.
{% endcolumn %}
{% endcolumns %}

{% columns %}
{% column valign="middle" %}

#### Open the Emerald Template in VS Code

Extract the **Emerald Template** files if they are in a ZIP archive.

In Visual Studio Code, click **File → Open Folder**.

Select the Emerald Template folder and open it.
{% endcolumn %}

{% column %}

<figure><img src="/files/bkpY6EaFmCY1CJbNrNJH" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

{% columns %}
{% column width="50%" %}

<figure><img src="/files/BMOL1G7EUNjpaoyR54AD" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

{% column width="50%" %}

#### Copy Matching Tebex Pages

Log in to your **Tebex Admin Panel**.

Navigate to Webs**tore → Apperance → Launch editor**

Locate the existing Tebex pages that match the Emerald Template structure.

Copy the content of these pages.
{% endcolumn %}
{% endcolumns %}

{% columns %}
{% column %}

#### Replace Tebex Pages with Emerald Template Files

Paste the copied page content into the corresponding files in the **Emerald Template**.

Ensure each Tebex page is correctly replaced with the Emerald Template version.
{% endcolumn %}

{% column %}

<figure><img src="/files/TrO0S2gb61qyecH2xONr" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

{% hint style="info" %}
If there are pages in your Tebex editor that **do not exist in the Emerald Template `pages` folder**, you should **clear their content completely**.
{% endhint %}

{% columns %}
{% column %}

<figure><img src="/files/RXIe5juXnX7unRVv4LOK" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

{% column valign="middle" %}

#### Remove Default Tebex Assets

Delete all default Tebex assets (CSS, images, and scripts) from the Tebex theme.

This prevents style conflicts with the Emerald Template.
{% endcolumn %}
{% endcolumns %}

{% columns %}
{% column %}

#### Add Emerald Template Assets

Open the **assets folder** inside the Emerald Template.

Add the Emerald Template assets **one by one** to the Tebex assets section using **Add Asset**.

Make sure to select the **correct asset type** for each file:

* CSS files → **CSS**
* JavaScript files → **JS**
* Images → **Image**
* Ensure all assets are added correctly and without errors.
  {% endcolumn %}

{% column valign="middle" %}

<figure><img src="/files/eiOOrV6bw2YD9GEE0Ilf" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

{% columns %}
{% column %}

<figure><img src="/files/7p0gg0OzmWaVWgbLkdLG" alt=""><figcaption></figcaption></figure>
{% endcolumn %}

{% column %}

#### Adding the Schema

Open the **schema file** provided with the Emerald Template.

**Copy the entire schema code**.

Paste the schema code into the appropriate **schema / head field** in the Tebex editor.
{% endcolumn %}
{% endcolumns %}

#### Final Check

* After completing all steps, **save your changes** and open the **Preview** page.
* Carefully check the store to make sure everything is working as expected.
* If you notice any issues or visual problems, **don’t forget to report them to us** so we can help you as quickly as possible.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://codpat.gitbook.io/codpat-docs/how-to-make-tebex-integration.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.