The main piece to our integrations is wrapped up in something we call "The magic script". The magic script is a standard way of dynamically discovering and importing the definitions of web components on the fly. We leverage this approach in all of our HAX platform integrations because it simplifies the initial question of how to teach the CMS / app about web components.

There's an entire Dev.to Series about our integration methodology if you'd like more detail about why we do this or how it works. The integration methodology is a stand alone repo you can use for custom builds, found in our Unbundled Web components repo . Below is what is recommended if you want to leverage our CDN and wide array of elements we already include in our builds.

This script will load off of the Penn State CDN and automatically hydrate the web components discovered on the page, including h-a-x and the HAX family of tags.

HAX All the Things repo has every integration we support as well as some examples of including HAX in Angular and other frameworks (see platform folder in that repo). For a common CMS integration example see this part of the WordPress plugin (code below)

## WordPress integration example

In this example we can see that WordPress is able to integrate with the wysiwyg-hax tag by using jQuery to correctly time when the WordPress loaded DOM is ready, then replacing the "content" area (a textarea with id="content") at run time with our light-dom capable wysiwyg-hax tag.

## General integration advisement

HAXeditor keeps so much functionality on the front-end that there's really very little tying it to..well.. anything. As a result, HAX is easy to integrate into systems that currently have WYSIWYG capabilities.

All integrations effectively boil down to four things

1. End point to load content
2. End point to save content
3. End point to load the appstore specification
4. End point to upload files (optional)

## Content filtering

Because web components are valid HTML tags your system may accept them when saved into your database but you may also be doing tag filtering or other XSS sanitation prior to storage. If you do process prior to storage (and you should) but it strips the web components out of the mark up, you'll need to add some filtering / white-listing capabilities to your system in order to ensure that the web component html tags pass through that should.