# Create Components for the Outlook and Gmail Integrations

Create custom Aura components that are available to add to the email application pane for the Outlook and Gmail integrations.

To add a component to email application panes in the Outlook or Gmail integration, implement the `clients:availableForMailAppAppPage` interface.

To allow the component access to email or calendar events, implement the `clients:hasItemContext` interface.

The `clients:hasItemContext` interface adds attributes to your component that it can use to implement record- or context-specific logic. The attributes included are:

- The `source` attribute, which indicates the email or appointment source. Possible values include `email` and `event`.

  ```nolang
  <aura:attribute name="source" type="String" />
  ```

- The `mode` attribute, which indicates viewing or composing an email or event. Possible values include `view` and `edit`.

  ```nolang
  <aura:attribute name="mode" type="String" />
  ```

- The `people` attribute indicates recipients’ email addresses on the current email or appointment.

  ```nolang
  <aura:attribute name="people" type="Object" />
  ```

  The shape of the `people` attribute changes according to the value of the `source` attribute.

  When the source attribute is set to email, the people object contains the following elements.

  ```nolang
  {
      to: [ { name: nameString, email: emailString }, ... ],
      cc: [ ... ],
      from: { name: senderName, email: senderEmail },
  }

  ```

  When the source attribute is set to event, the people object contains the following elements.

  ```nolang
  {
      requiredAttendees: [ { name: attendeenameString, email: emailString }, ... ],
      optionalAttendees: [ { name: optattendeenameString, email: emailString }, ... ],
      organizer: { name: organizerName, email: senderEmail },
  }

  ```

- The `subject` indicates the subject on the current email.

  ```nolang
  <aura:attribute name="subject" type="String" />
  ```

- The `messageBody` indicates the email message on the current email.

  ```nolang
  <aura:attribute name="messageBody" type="String" />
  ```

To provide the component with an event’s date or location, implement the `clients:hasEventContext` interface.

```nolang

    dates: {
            "start": value (String),
            "end": value (String),
    }

```

The Outlook and Gmail integrations don’t support the following events:

- `force:navigateToList`
- `force:navigateToRelatedList`
- `force:navigateToObjectHome`
- `force:refreshView`

:::note
To ensure that custom components appear correctly, enable them to adjust to variable widths.
:::

- **[Sample Custom Components for Outlook and Gmail Integration](/docs/platform/aura-platform/guide/components-custom-for-app-builder-email-app-pane.md)**

  Review samples of custom Aura components that you can implement in the email application pane for Outlook integration and Gmail Integration.