# App integration

App integration allows you to introduce new functionality directly into Struct PIM, opening up possibilities for extending the system to better fit your workflows.

This approach enhances the flexibility of the platform while maintaining a consistent and user-friendly experience. The setup between your custom apps and the PIM is designed to be simple and straightforward, enabling you to get started quickly, iterate efficiently, and explore new features with minimal technical overhead.

The streamlined process ensures that custom and native functionality coexist seamlessly within the same interface, helping you extend the platform without disrupting existing workflows. By combining custom and built-in features, you can enhance productivity while keeping the overall user experience intuitive and cohesive.

### What you can do with App Integration

* **Easily integrate custom apps** into the PIM through a user-friendly setup process, allowing you to connect new functionality directly into the system.
* **Set up extensions** for your custom app to embed its functionality into the PIM’s workflows, ensuring a smooth and consistent user experience across all features.
* **Enhance the user experience** by embedding custom functionality cohesively within the PIM interface, without interrupting existing workflows.

### Getting started

For a quick start on setting up a minimum requirement extension, click [here](https://docs.struct.com/developer/app-integration/quickstart).

A detailed guide explaining each step in the process can be seen [here](https://docs.struct.com/tutorials/guides/how-to-use-app-integration).

#### **Extensions SDK package**

The [Struct extension SDK](https://www.npmjs.com/package/@structdk/extension-sdk) enables developers to create custom extensions for Struct PIM. These extensions operate as iframes embedded within the Struct PIM user interface.

<figure><img src="https://2141378775-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuUonpFWM7AJ0xVVXV1tr%2Fuploads%2FkQiK27wNi5xN8ruWumP8%2Fimage.png?alt=media&#x26;token=4aa79d12-a9fe-4c13-8bf8-12c6cd13ceb3" alt=""><figcaption></figcaption></figure>

Once a connection has been established using the SDK package, it gives you the option to communicate between the custom app and the PIM through actions and events.

```ts
import { createStructSDK } from '@structdk/extension-sdk';
import type { TabContextPayload } from '@structdk/extension-sdk';

// 1. Create SDK instance (optionally lock to a specific origin)
const struct = createStructSDK({ hostOrigin: 'https://your-struct-instance.struct.com' });

// 2. Request context from the host
const ctx = await struct.actions.getContext<TabContextPayload>();
console.log('Entity:', ctx.entityType, ctx.entityId);
console.log('Slug:', ctx.slug);

// 3. Auto-resize the iframe to fit content
struct.actions.enableAutoResize({ maxHeight: 800 });

// 4. Register event listeners for ongoing changes
struct.events.onEntityChangedEvent((payload) => {
  console.log('Entity updated:', payload.entityId);
});

struct.events.onLanguageChangedEvent((payload) => {
  console.log('Language:', payload.currentLanguage);
});

// 5. Clean up when done
struct.destroy();
```

#### Icon package

[Struct Icon](https://www.npmjs.com/package/@structdk/struct-icon) provides streamlined solutions for PIM and partner developers, prioritizing rapid deployment and easy integration with publish-ready sprites, raw SVGs, and versatile framework components.

<figure><img src="https://2141378775-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuUonpFWM7AJ0xVVXV1tr%2Fuploads%2FLINkIJiBaOWrnGuQHehY%2Fimage.png?alt=media&#x26;token=0090f655-42bc-4491-b6cd-76eeba5db55b" alt=""><figcaption></figcaption></figure>

Below are examples from the npm package page demonstrating its versatility.

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

```javascript
// import Calendar24 from '@structdk/struct-icon/react/24/calendar';
<Calendar24 className='w-6 h-6 text-foreground' aria-label='Calendar' />;
```

{% endtab %}

{% tab title="Vue 3" %}

```vue
<script setup>
import Calendar24 from '@structdk/struct-icon/vue/24/calendar.vue';
</script>

<template>
  <Calendar24 class="w-6 h-6 text-foreground" aria-label="Calendar" />
</template>
```

{% endtab %}

{% tab title="Svelte" %}

```svelte
<script>
  import Calendar24 from '@structdk/struct-icon/svelte/24/calendar.svelte';
</script>

<Calendar24 class="w-6 h-6 text-foreground" ariaLabel="Calendar" />
```

{% endtab %}
{% endtabs %}

#### UI package

[Struct UI](https://www.npmjs.com/package/@structdk/ui) provides a ready-to-use CSS file (`struct-ui.css` / `struct-ui.min.css`), featuring a curated collection of components and layout primitives compatible with any tech stack.

<figure><img src="https://2141378775-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuUonpFWM7AJ0xVVXV1tr%2Fuploads%2Faitacpv48jjeWCsoOzWq%2Fimage.png?alt=media&#x26;token=270be97c-2c86-466e-8dda-02cc65dbb58c" alt=""><figcaption></figcaption></figure>

The UI components are easy to use and require only the CSS file to be imported. Below is an example from the npm package page.

```typescript
// main.jsx / main.tsx
import '@structdk/ui/dist/struct-ui.css';

export function PrimaryButton({ children }) {
  return <button className='btn btn-primary'>{children}</button>;
}
```