> For the complete documentation index, see [llms.txt](https://components-for-learning.gitbook.io/components-for-learning-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://components-for-learning.gitbook.io/components-for-learning-documentation/advanced/custom-components.md).

# 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="/files/puMTODxItu28wNoVlTk0" 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="/files/f3hAvnKSLBYpR2Mr1ID0" 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="/files/5rylhB8IK53LzgYwOijT" 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="/files/SOHvlSzMkFMtjbJ98zpI" 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="/files/zXXfSOLQV7DWKwjXDvKE" 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="/files/KlnQ2qZhnwLylGD2kh1o" alt=""><figcaption></figcaption></figure>