# Custom components

Here's a step-by-step example on how to create a custom component.

{% hint style="info" %}
This feature is intended to Moodle administrators, not to content creators.
{% endhint %}

### Step 1

Go to *Site administration → Plugins → Text editors → TinyMCE editor → Components for Learning (C4L)* and then click on the Custom Components section.

<figure><img src="https://1346909111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkOpdov80ZvaY52upvdMq%2Fuploads%2FCHHu29vUJiChIkNexNus%2F1.png?alt=media&#x26;token=f1b3bacc-d13f-4404-864b-194e42a18643" alt=""><figcaption></figcaption></figure>

### Step 2

Select the value `1` in the `customcompcount` field and press the `Save changes` button; by doing this, all the necessary fields to create our first custom component will appear on the screen.

<figure><img src="https://1346909111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkOpdov80ZvaY52upvdMq%2Fuploads%2FppNlI6KPgJW2vQPtv3ul%2F2.png?alt=media&#x26;token=1a5c7ace-f0b1-4fbe-ad81-6e951c407a99" alt=""><figcaption></figcaption></figure>

### Step 3

First, we will place our component's CSS classes in the `custompreviewcss` field. The CSS classes we add in this field will allow us to view our components within the Tiny editor when we are in edit mode.

```
.askchatgpt {
  font-family: sans-serif;
  position: relative;
  margin-left: 24px;
  max-width: 75%;
}

.askchatgpt-container {
  background-color: #EFECFF;
  display: flex;
  flex-direction: column;
  padding: 36px 48px 36px 72px;
  border-radius: 12px;
}

.askchatgpt h1, h2 {
  color: #543ECC;
  margin-top: 0;
  margin-bottom: 0;
}

.askchatgpt h1 {
  font-size: 18px;
  margin-bottom: 12px;
}

.askchatgpt h2 {
  font-size: 16px;
}

.askchatgpt-area {
  color: #000;
  background-color: #fff;
  padding: 18px 24px;
  border-radius: 6px;
  margin-bottom: 36px;
}

.askchatgpt-reflect {
  margin-bottom: 0;
}

.askchatgpt-icon {
  height: 68px;
  width: 68px;
  position: absolute;
  top: 12px;
  left: -20px;
  border-radius: 6px;
  transform: rotate(-8deg);
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.15));
}
```

### Step 4

Upload to the `customimagesbank` field the image meant to appear within our component.

<figure><img src="https://1346909111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkOpdov80ZvaY52upvdMq%2Fuploads%2FbvuFnk3p4Na7Z8CxlQrK%2Fchatgpt-component.svg?alt=media&#x26;token=d57c5841-67b3-4a64-b3b7-f36493e2073c" alt=""><figcaption></figcaption></figure>

### Step 5

Click on the `customcompenable1` option to activate our component. This field allows us to enable or disable the components we have created.

### Step 6

In the `customcompname1` field, enter the text `ChatGPT`. This field allows us to set the text that will appear on the button of our component - 15 characters maximum."

### Step 7

In the `customcompicon1` field, upload the icon that will appear on the button of our component. If we do not have an icon, the system will automatically assign one.

<figure><img src="https://1346909111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkOpdov80ZvaY52upvdMq%2Fuploads%2FHZMGDosU2VCaZBY4BG83%2Faskchatgpt-ui-icon.svg?alt=media&#x26;token=17811270-5de3-4660-a765-bf94ee059ed8" alt=""><figcaption></figcaption></figure>

### Step 8

In the `customcomptext1` field, enter the text that will be used as a 'placeholder' in the component.

`What’s the best way to know if an animal is a mammal?`

### Step 9

In the `customcompcode1` field, enter the component's HTML code.

```
<div class="askchatgpt {{CUSTOMCLASS}}">
  <div class="askchatgpt-icon"><img src="{{chatgpt-component.svg}}"></div>
  <div class="askchatgpt-container">
    <h1>Ask ChatGPT</h1>
    <div class="askchatgpt-question">
      <p class="askchatgpt-area">{{PLACEHOLDER}}</p>
    </div>
    <h2>Think about the answer</h2>
    <p class="askchatgpt-reflect">Is it determinist? How can you tell?</p>
  </div>
</div>
```

Here's some special elements that appear in the previous HTML code snipped:

* {{CUSTOMCLASS}} - Mandatory in order for the component to actually work.
* {{chatgpt-component.svg}} - The images added in the Step 5.
* {{PLACEHOLDER}} - The text included in the Step 9.

### Step 10

Activate the variants by clicking the `customcompvariant1` option. Custom components can only use the `full width` variant.

### Step 11

In the `customcompsortorder1` field, enter the value `1`. This parameter allows us to display the components in the order that suits us best. Components with smaller numbers will appear first.

### Step 12

Press the `Save changes` button to save your changes.

### Step 13

Check that the created component appears within the C4L plugin's `Custom` tab.

<figure><img src="https://1346909111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkOpdov80ZvaY52upvdMq%2Fuploads%2F1hTwuTHgtK1nBfQnyg8F%2F4b.png?alt=media&#x26;token=d1c8f00d-1aad-40c7-81cd-f804f5953780" alt=""><figcaption></figcaption></figure>

### Step 14

In order for the components to be displayed correctly outside the Tiny editor, we must also copy the same CSS classes we used in [#step-3](#step-3 "mention") into *Site administration →* *Appearance* *→ Additional HTML* *→ Within HEAD* (the `additionalhtmlhead` field). Your CSS must be wrapped inside of a `<style></style>` tag (both opening and closing tags), in order to generate valid HTML code. Save the changes by pressing the `Save changes` button.

<figure><img src="https://1346909111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkOpdov80ZvaY52upvdMq%2Fuploads%2FEDjGI37z9fFREuAFvcAx%2F3.png?alt=media&#x26;token=92d1c8e8-9487-4fdc-806b-0eec7fa97246" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: 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:

```
GET https://components-for-learning.gitbook.io/components-for-learning-documentation/advanced/custom-components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.