# Adding Custom Page Elements

Third party modules can be incorporated into BetterForms apps. This opens up en enormous library of open source and paid modules. You should have a good working knowledge of VueJS and how binding works.

The easiest modules to incorporate into BetterForms are Vue based. Most Vue Modules start with `v-someName`

Currently modules will need a CDN link and must install themselves. (See limitations below)

## Example: V-Calendar

We will add `v-calendar` a beautiful date picker.

![V-Calendar](/files/-LYA8KhqYl-JXa_pH62u)

To reference the source code we will add the CDN link by adding the following to the DOM Header insertions for you site. The first line adds the CSS style sheet, the second is for the module code.

```markup
<link rel='stylesheet' href='https://unpkg.com/v-calendar/lib/v-calendar.min.css'>
<script src='https://unpkg.com/v-calendar@2.1.5/lib/v-calendar.umd.min.js'></script>
```

This module installs itself and will be available in `HTML` elements.

In the documentation for this library (<https://vcalendar.io/>) we see:

```javascript
<v-calendar :attributes='attrs'>
</v-calendar>
```

Here the `:attributes` key is bound to a variable called `attrs` To make the BetterForms compatible, we need to bind the `atributes` key to a BetterForms data source. We will use `model` like this: *(remember: an attribute must have a colon in front of it to be compatible with Vue bindings)*

```
<v-date-picker 
    :available-dates='model.availableDates' 
    v-model='model.selectedDates'
    >
</v-date-picker>
```

The `v-model` in the component points to the data source used to populate the calendar.

This code is inserted into an HTML element and we are done!

## Limitations

There are some limitations when adding 3rd party libraries.

* Module libraries must be available via a CDN
* Modules must self install as a global Vue component
* Modules must not require initialization code and be ready for use as a Vue component
* Modules that are not Vue components can still be used but will often require writing small JS interface code to help patch them into the Klai framework.
* Be sure to make not if the type of links as some are cached much slower than others, see: <https://forum.fmbetterforms.com/t/cdn-advice-if-your-site-is-slow-to-load/239>


---

# 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://docs.klai.studio/reference/components-overview/3rd-party-elements.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.