# nylas-notetaker-config

Source: https://developer.nylas.com/docs/reference/ui/notetaker-config/

The `nylas-notetaker-config` component is a UI component that allows users to configure Notetaker settings for scheduler configurations.

## Overview

- **Tag**: `<nylas-notetaker-config>`
- **Encapsulation**: shadow

## Installation

### HTML / Web Component

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@nylas/web-elements/dist/cdn/nylas-web-elements/nylas-web-elements.esm.js"></script>
```

### React

```bash
npm install @nylas/react
```

## Usage

### HTML

```html
<nylas-notetaker-config></nylas-notetaker-config>
```

### React

```jsx
import { NylasNotetakerConfig } from '@nylas/react';

export default function Example() {
  return <NylasNotetakerConfig />;
}
```

## Props

| Property | Attribute | Type | Default | Required | Description |
| --- | --- | --- | --- | --- | --- |
| `conferencing` | `conferencing` | Conference \| undefined | - | No | The conferencing configuration for the event. Required to determine if notetaker can be enabled. |
| `initialNotetakerSettings` | `initial-notetaker-settings` | Notetaker \| undefined | - | No | Initial notetaker settings to populate the form. Takes precedence over settings derived from selectedConfiguration. |
| `name` | `name` | string | `'notetaker'` | No | The name of the component. |
| `selectedConfiguration` | `selected-configuration` | Configuration \| undefined | - | No |  |
| `selectedLanguage` | `selected-language` | LANGUAGE_CODE.de \| LANGUAGE_CODE.en \| LANGUAGE_CODE.es \| LANGUAGE_CODE.fr \| LANGUAGE_CODE.ja \| LANGUAGE_CODE.ko \| LANGUAGE_CODE.nl \| LANGUAGE_CODE.sv \| LANGUAGE_CODE.zh \| undefined | - | No | The selected language. |
| `themeConfig` | `theme-config` | undefined \| { '--nylas-primary'?: string \| undefined; '--nylas-info'?: string \| undefined; '--nylas-success'?: string \| undefined; '--nylas-warning'?: string \| undefined; '--nylas-error'?: string \| undefined; '--nylas-error-pressed'?: string \| undefined; '--nylas-base-0'?: string \| undefined; '--nylas-base-25'?: string \| undefined; '--nylas-base-50'?: string \| undefined; '--nylas-base-100'?: string \| undefined; '--nylas-base-200'?: string \| undefined; '--nylas-base-300'?: string \| undefined; '--nylas-base-400'?: string \| undefined; '--nylas-base-500'?: string \| undefined; '--nylas-base-600'?: string \| undefined; '--nylas-base-700'?: string \| undefined; '--nylas-base-800'?: string \| undefined; '--nylas-base-900'?: string \| undefined; '--nylas-base-950'?: string \| undefined; '--nylas-color-blue-50'?: string \| undefined; '--nylas-color-blue-100'?: string \| undefined; '--nylas-color-blue-300'?: string \| undefined; '--nylas-color-blue-500'?: string \| undefined; '--nylas-color-blue-700'?: string \| undefined; '--nylas-color-blue-900'?: string \| undefined; '--nylas-color-red-50'?: string \| undefined; '--nylas-color-red-100'?: string \| undefined; '--nylas-color-red-300'?: string \| undefined; '--nylas-color-red-500'?: string \| undefined; '--nylas-color-red-700'?: string \| undefined; '--nylas-color-red-900'?: string \| undefined; '--nylas-color-green-50'?: string \| undefined; '--nylas-color-green-100'?: string \| undefined; '--nylas-color-green-300'?: string \| undefined; '--nylas-color-green-500'?: string \| undefined; '--nylas-color-green-700'?: string \| undefined; '--nylas-color-green-900'?: string \| undefined; '--nylas-color-yellow-50'?: string \| undefined; '--nylas-color-yellow-100'?: string \| undefined; '--nylas-color-yellow-300'?: string \| undefined; '--nylas-color-yellow-500'?: string \| undefined; '--nylas-color-yellow-700'?: string \| undefined; '--nylas-color-yellow-900'?: string \| undefined; '--nylas-color-purple-50'?: string \| undefined; '--nylas-color-purple-100'?: string \| undefined; '--nylas-color-purple-300'?: string \| undefined; '--nylas-color-purple-500'?: string \| undefined; '--nylas-color-purple-700'?: string \| undefined; '--nylas-color-purple-900'?: string \| undefined; '--nylas-color-sky-50'?: string \| undefined; '--nylas-color-sky-100'?: string \| undefined; '--nylas-color-sky-300'?: string \| undefined; '--nylas-color-sky-500'?: string \| undefined; '--nylas-color-sky-700'?: string \| undefined; '--nylas-color-sky-900'?: string \| undefined; '--nylas-color-black'?: string \| undefined; '--nylas-color-grey-900'?: string \| undefined; '--nylas-color-grey-800'?: string \| undefined; '--nylas-color-grey-700'?: string \| undefined; '--nylas-color-grey-600'?: string \| undefined; '--nylas-color-grey-500'?: string \| undefined; '--nylas-color-grey-400'?: string \| undefined; '--nylas-color-grey-300'?: string \| undefined; '--nylas-color-grey-200'?: string \| undefined; '--nylas-color-grey-100'?: string \| undefined; '--nylas-color-grey-50'?: string \| undefined; '--nylas-color-white'?: string \| undefined; '--nylas-font-family'?: string \| undefined; '--nylas-font-size'?: string \| undefined; '--nylas-border-radius'?: string \| undefined; '--nylas-border-radius-2x'?: string \| undefined; '--nylas-border-radius-3x'?: string \| undefined; } | - | No | The theme configuration. |

## Events

| Event | Detail | Description |
| --- | --- | --- |
| `notetakerError` | { error: string; reason: string; context?: Record<string, any> \| undefined; } | This event is fired when an error occurs in the notetaker configuration. |
| `valueChanged` | { value: string; name: string; } | This event is fired when the notetaker configuration changes. |

## Methods

### `getNotetakerState`

Public method to get current notetaker state

**Signature**: `getNotetakerState() => Promise<NotetakerState>`

**Returns**: `Promise<NotetakerState>`

### `setNotetakerEnabled`

Public method to programmatically set notetaker enabled state

**Signature**: `setNotetakerEnabled(enabled: boolean) => Promise<{ success: boolean; error?: string; }>`

**Returns**: `Promise<{ success: boolean; error?: string | undefined; }>`

### `setNotetakerOption`

Public method to programmatically set a notetaker option

**Signature**: `setNotetakerOption(option: string, value: boolean | string) => Promise<{ success: boolean; error?: string; }>`

**Returns**: `Promise<{ success: boolean; error?: string | undefined; }>`

### `updateConferencing`

Public method to programmatically update conferencing configuration

**Signature**: `updateConferencing(conferencing: Conference | undefined) => Promise<void>`

**Returns**: `Promise<void>`

## CSS shadow parts

| Part | Description |
| --- | --- |
| `nntc` | The notetaker config container |
| `nntc__checkbox` | A checkbox container |
| `nntc__content` | The content container |
| `nntc__header` | The header of the notetaker config |
| `nntc__input` | An input field |
| `nntc__primary-toggle` |  |
| `nntc__section` | A section container |
| `nntc__section-description` |  |
| `nntc__section-title` | A section title |
| `nntc__textarea` | A textarea field |

## Dependencies

This component uses the following child components:

- [`<checkbox-component>`](/docs/reference/ui/checkbox-component/)
- [`<tooltip-component>`](/docs/reference/ui/tooltip-component/)
- [`<info-icon>`](/docs/reference/ui/info-icon/)
- [`<input-component>`](/docs/reference/ui/input-component/)
- [`<textarea-component>`](/docs/reference/ui/textarea-component/)

## Used by

This component is used inside:

- [`<nylas-editor-tabs>`](/docs/reference/ui/editor-tabs/)