> For the complete documentation index, see [llms.txt](https://docs.yaycommerce.com/yaymail/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.yaycommerce.com/yaymail/developer-zone/api/register-elements/register-new-elements.md).

# Register New Elements

1. Backend Implementation (PHP)\
   \
   To register new emails, developers should use the following code:<br>

   ```php
   /**
    * Register new Elements.
    *
    * @param object $element_service The service responsible for registering elements
    * @return void
    */
    function register_new_element( $element_service ) {
   	
   	$element_service->register_element( new \YourNewElement()  );

   }
   add_action( 'yaymail_register_elements', 'register_new_element' );

   // Enqueue WordPress React scripts
   function enqueue_wp_react_scripts() {
       wp_enqueue_script( 'wp-react' );
   }
   add_action( 'wp_enqueue_scripts', 'enqueue_wp_react_scripts' );
   ```

   \
   This code attaches to the `yaymail_register_elements` action hook. It is used to register new email templates by passing the email instance.

2. Frontend Implementation (TypeScript/React)
   1. Register Element in Frontend

{% tabs %}
{% tab title="JavaScript" %}

```javascript
import NewElement from './elements/NewElement';

document.addEventListener('yaymail-loaded', function(event) {
  if (window.yaymailData && window.yaymailData.shared && window.yaymailData.shared.stores && window.yaymailData.shared.stores.useAddonStore) {
    var storeState = window.yaymailData.shared.stores.useAddonStore.getState();
    if (storeState && typeof storeState.registerElement === 'function') {
      storeState.registerElement('new_element', NewElement);
    }
  }
});
```

{% endtab %}

{% tab title="ReactJS" %}

```tsx
import NewElement from './elements/NewElement';

document.addEventListener( 'yaymail-loaded', (event) => {
  window.yaymailData.shared?.stores?.useAddonStore
    ?.getState()
    .registerElement( 'new_element', NewElement );
});
```

{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="JavaScript" %}

```javascript
function NewElement( props ) {
  try {
    const { createElement } = wp.react;
    const { element } = props;
    const data = element.data;

    const { ElementWrapper } = window.yaymailData.shared.core_components;
    const { useShortcode } = window.yaymailData.shared.hooks;
    const { doShortcode } = useShortcode();

    const title = doShortcode(data.title || '');
    const content = doShortcode(data.content || '');
    const titleColor = data.title_color?.default_value || '#000000';
    const titleFontSize = data.title_font_size?.default_value || '16px';

    const wrapperStyles = {
      'background-color': data.background_color ?? 'transparent',
      'padding-top': data.padding?.top + 'px' ?? 0,
      'padding-right': data.padding?.right + 'px' ?? 0,
      'padding-bottom': data.padding?.bottom + 'px' ?? 0,
      'padding-left': data.padding?.left + 'px' ?? 0,
      'font-family': data.font_family ?? 'initial',
    };

    return createElement(
      ElementWrapper,
      {
        element,
        className: 'new_element-wrapper',
        style: wrapperStyles,
      },
      createElement(
        'div',
        { className: 'new_element-container' },
        createElement(
          'h2',
          {
            style: {
              color: titleColor,
              fontSize: titleFontSize,
            },
          },
          title,
        ),
        createElement('div', { className: 'new_element-content' }, content),
      ),
    );
  } catch (error) {
    return createElement('div', { className: 'error' }, 'Error loading element');
  }
}

export default NewElement;
```

{% endtab %}

{% tab title="ReactJS" %}

```jsx
import { useMemo } from 'react';

const NewElement = (props) => {
  const { element } = props;
  const data = element.data;

  const { ElementWrapper } = window.yaymailData.shared.core_components;

  const { useShortcode } = window.yaymailData.shared.hooks;

  const { doShortcode } = useShortcode();

  const title = useMemo(() => doShortcode(data.title), [data.title]);
  const content = useMemo(() => doShortcode(data.content), [data.content]);
  const title_color = useMemo(() => data.title_color, [data.title_color]);
  const title_font_size = useMemo(() => data.title_font_size, [data.title_font_size]);

  const wrapperStyles = useMemo(
    () => ({
      backgroundColor: data.background_color ?? 'transparent',
      paddingTop: data.padding?.top + 'px' ?? 0,
      paddingRight: data.padding?.right + 'px' ?? 0,
      paddingBottom: data.padding?.bottom + 'px' ?? 0,
      paddingLeft: data.padding?.left + 'px' ?? 0,
      fontFamily: data.font_family ?? 'initial',
    }),
    [data.padding, data.background_color, data.font_family],
  );

  return (
    <ElementWrapper
      className="new_element-wrapper"
      element={element}
      style={wrapperStyles}
    >
      <div className="new_element-container">
        <h2 style={{ color: title_color, fontSize: title_font_size }}>{title}</h2>
        <div className="new_element-content">{content}</div>
      </div>
    </ElementWrapper>
  );
};

export default NewElement;
```

{% endtab %}
{% endtabs %}