Transcription

We recommend that you familiarize yourselves with UI Customization Concepts before attempting to modify any components.

Overview

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltTranscriptionWireframe>
        <VeltTranscriptionWireframe.FloatingMode />
        <VeltTranscriptionWireframe.EmbedMode />
    </VeltTranscriptionWireframe>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-transcription-wireframe>
        <velt-transcription-floating-mode-wireframe></velt-transcription-floating-mode-wireframe>
        <velt-transcription-embed-mode-wireframe></velt-transcription-embed-mode-wireframe>
    </velt-transcription-wireframe>
</velt-wireframe>

FloatingMode

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltTranscriptionWireframe.FloatingMode>
        <VeltTranscriptionWireframe.FloatingMode.Button />
        <VeltTranscriptionWireframe.FloatingMode.Tooltip />
        <VeltTranscriptionWireframe.FloatingMode.PanelContainer />
    </VeltTranscriptionWireframe.FloatingMode>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-transcription-floating-mode-wireframe>
        <velt-transcription-button-wireframe></velt-transcription-button-wireframe>
        <velt-transcription-tooltip-wireframe></velt-transcription-tooltip-wireframe>
        <velt-transcription-panel-container-wireframe></velt-transcription-panel-container-wireframe>
    </velt-transcription-floating-mode-wireframe>
</velt-wireframe>

Button

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltTranscriptionWireframe.FloatingMode.Button />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-transcription-button-wireframe></velt-transcription-button-wireframe>
</velt-wireframe>

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltTranscriptionWireframe.FloatingMode.Tooltip />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-transcription-tooltip-wireframe></velt-transcription-tooltip-wireframe>
</velt-wireframe>

PanelContainer

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltTranscriptionWireframe.FloatingMode.PanelContainer>
        <VeltTranscriptionWireframe.FloatingMode.Panel />
    </VeltTranscriptionWireframe.FloatingMode.PanelContainer>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-transcription-panel-container-wireframe>
        <velt-transcription-panel-wireframe></velt-transcription-panel-wireframe>
    </velt-transcription-panel-container-wireframe>
</velt-wireframe>

Panel

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltTranscriptionWireframe.FloatingMode.Panel>
        <VeltTranscriptionWireframe.FloatingMode.Panel.CloseButton />
        <VeltTranscriptionWireframe.FloatingMode.Panel.CopyLink />
        <VeltTranscriptionWireframe.FloatingMode.Panel.Summary />
        <VeltTranscriptionWireframe.FloatingMode.Panel.Content />
    </VeltTranscriptionWireframe.FloatingMode.Panel>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-transcription-panel-wireframe>
        <velt-transcription-close-button-wireframe></velt-transcription-close-button-wireframe>
        <velt-transcription-copy-link-wireframe></velt-transcription-copy-link-wireframe>
        <velt-transcription-summary-wireframe></velt-transcription-summary-wireframe>
        <velt-transcription-content-wireframe></velt-transcription-content-wireframe>
    </velt-transcription-panel-wireframe>
</velt-wireframe>

CloseButton

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltTranscriptionWireframe.FloatingMode.Panel.CloseButton />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-transcription-close-button-wireframe></velt-transcription-close-button-wireframe>
</velt-wireframe>

CopyLink

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltTranscriptionWireframe.FloatingMode.Panel.CopyLink>
        <VeltTranscriptionWireframe.FloatingMode.Panel.CopyLink.Button />
        <VeltTranscriptionWireframe.FloatingMode.Panel.CopyLink.Tooltip />
    </VeltTranscriptionWireframe.FloatingMode.Panel.CopyLink>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-transcription-copy-link-wireframe>
        <velt-transcription-copy-link-button-wireframe></velt-transcription-copy-link-button-wireframe>
        <velt-transcription-copy-link-tooltip-wireframe></velt-transcription-copy-link-tooltip-wireframe>
    </velt-transcription-copy-link-wireframe>
</velt-wireframe>

Button

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltTranscriptionWireframe.FloatingMode.Panel.CopyLink.Button />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-transcription-copy-link-button-wireframe></velt-transcription-copy-link-button-wireframe>
</velt-wireframe>

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltTranscriptionWireframe.FloatingMode.Panel.CopyLink.Tooltip />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-transcription-copy-link-tooltip-wireframe></velt-transcription-copy-link-tooltip-wireframe>
</velt-wireframe>

Summary

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltTranscriptionWireframe.FloatingMode.Panel.Summary>
        <VeltTranscriptionWireframe.FloatingMode.Panel.Summary.Text />
        <VeltTranscriptionWireframe.FloatingMode.Panel.Summary.ExpandToggle />
    </VeltTranscriptionWireframe.FloatingMode.Panel.Summary>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-transcription-summary-wireframe>
        <velt-transcription-summary-text-wireframe></velt-transcription-summary-text-wireframe>
        <velt-transcription-summary-expand-toggle-wireframe></velt-transcription-summary-expand-toggle-wireframe>
    </velt-transcription-summary-wireframe>
</velt-wireframe>

Text

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltTranscriptionWireframe.FloatingMode.Panel.Summary.Text />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-transcription-summary-text-wireframe></velt-transcription-summary-text-wireframe>
</velt-wireframe>

ExpandToggle

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltTranscriptionWireframe.FloatingMode.Panel.Summary.ExpandToggle>
        <VeltTranscriptionWireframe.FloatingMode.Panel.Summary.ExpandToggle.On />
        <VeltTranscriptionWireframe.FloatingMode.Panel.Summary.ExpandToggle.Off />
    </VeltTranscriptionWireframe.FloatingMode.Panel.Summary.ExpandToggle>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-transcription-summary-expand-toggle-wireframe>
        <velt-transcription-summary-expand-toggle-on-wireframe></velt-transcription-summary-expand-toggle-on-wireframe>
        <velt-transcription-summary-expand-toggle-off-wireframe></velt-transcription-summary-expand-toggle-off-wireframe>
    </velt-transcription-summary-expand-toggle-wireframe>
</velt-wireframe>

On

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltTranscriptionWireframe.FloatingMode.Panel.Summary.ExpandToggle.On />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-transcription-summary-expand-toggle-on-wireframe></velt-transcription-summary-expand-toggle-on-wireframe>
</velt-wireframe>

Off

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltTranscriptionWireframe.FloatingMode.Panel.Summary.ExpandToggle.Off />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-transcription-summary-expand-toggle-off-wireframe></velt-transcription-summary-expand-toggle-off-wireframe>
</velt-wireframe>

Content

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltTranscriptionWireframe.FloatingMode.Panel.Content>
        <VeltTranscriptionWireframe.FloatingMode.Panel.Content.Item />
    </VeltTranscriptionWireframe.FloatingMode.Panel.Content>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-transcription-content-wireframe>
        <velt-transcription-content-item-wireframe></velt-transcription-content-item-wireframe>
    </velt-transcription-content-wireframe>
</velt-wireframe>

Item

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltTranscriptionWireframe.FloatingMode.Panel.Content.Item>
        <VeltTranscriptionWireframe.FloatingMode.Panel.Content.Item.Text />
        <VeltTranscriptionWireframe.FloatingMode.Panel.Content.Item.Time />
    </VeltTranscriptionWireframe.FloatingMode.Panel.Content.Item>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-transcription-content-item-wireframe>
        <velt-transcription-content-item-text-wireframe></velt-transcription-content-item-text-wireframe>
        <velt-transcription-content-item-time-wireframe></velt-transcription-content-item-time-wireframe>
    </velt-transcription-content-item-wireframe>
</velt-wireframe>

Text

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltTranscriptionWireframe.FloatingMode.Panel.Content.Item.Text />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-transcription-content-item-text-wireframe></velt-transcription-content-item-text-wireframe>
</velt-wireframe>

Time

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltTranscriptionWireframe.FloatingMode.Panel.Content.Item.Time />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-transcription-content-item-time-wireframe></velt-transcription-content-item-time-wireframe>
</velt-wireframe>

EmbedMode

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltTranscriptionWireframe.EmbedMode>
        <VeltTranscriptionWireframe.EmbedMode.Panel />
    </VeltTranscriptionWireframe.EmbedMode>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-transcription-embed-mode-wireframe>
        <velt-transcription-panel-wireframe></velt-transcription-panel-wireframe>
    </velt-transcription-embed-mode-wireframe>
</velt-wireframe>

Panel

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltTranscriptionWireframe.EmbedMode.Panel>
        <VeltTranscriptionWireframe.EmbedMode.Panel.CloseButton />
        <VeltTranscriptionWireframe.EmbedMode.Panel.CopyLink />
        <VeltTranscriptionWireframe.EmbedMode.Panel.Summary />
        <VeltTranscriptionWireframe.EmbedMode.Panel.Content />
    </VeltTranscriptionWireframe.EmbedMode.Panel>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-transcription-panel-wireframe>
        <velt-transcription-close-button-wireframe></velt-transcription-close-button-wireframe>
        <velt-transcription-copy-link-wireframe></velt-transcription-copy-link-wireframe>
        <velt-transcription-summary-wireframe></velt-transcription-summary-wireframe>
        <velt-transcription-content-wireframe></velt-transcription-content-wireframe>
    </velt-transcription-panel-wireframe>
</velt-wireframe>

CloseButton

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltTranscriptionWireframe.EmbedMode.Panel.CloseButton />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-transcription-close-button-wireframe></velt-transcription-close-button-wireframe>
</velt-wireframe>

CopyLink

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltTranscriptionWireframe.EmbedMode.Panel.CopyLink>
        <VeltTranscriptionWireframe.EmbedMode.Panel.CopyLink.Button />
        <VeltTranscriptionWireframe.EmbedMode.Panel.CopyLink.Tooltip />
    </VeltTranscriptionWireframe.EmbedMode.Panel.CopyLink>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-transcription-copy-link-wireframe>
        <velt-transcription-copy-link-button-wireframe></velt-transcription-copy-link-button-wireframe>
        <velt-transcription-copy-link-tooltip-wireframe></velt-transcription-copy-link-tooltip-wireframe>
    </velt-transcription-copy-link-wireframe>
</velt-wireframe>

Button

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltTranscriptionWireframe.EmbedMode.Panel.CopyLink.Button />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-transcription-copy-link-button-wireframe></velt-transcription-copy-link-button-wireframe>
</velt-wireframe>

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltTranscriptionWireframe.EmbedMode.Panel.CopyLink.Tooltip />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-transcription-copy-link-tooltip-wireframe></velt-transcription-copy-link-tooltip-wireframe>
</velt-wireframe>

Summary

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltTranscriptionWireframe.EmbedMode.Panel.Summary>
        <VeltTranscriptionWireframe.EmbedMode.Panel.Summary.Text />
        <VeltTranscriptionWireframe.EmbedMode.Panel.Summary.ExpandToggle />
    </VeltTranscriptionWireframe.EmbedMode.Panel.Summary>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-transcription-summary-wireframe>
        <velt-transcription-summary-text-wireframe></velt-transcription-summary-text-wireframe>
        <velt-transcription-summary-expand-toggle-wireframe></velt-transcription-summary-expand-toggle-wireframe>
    </velt-transcription-summary-wireframe>
</velt-wireframe>

Text

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltTranscriptionWireframe.EmbedMode.Panel.Summary.Text />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-transcription-summary-text-wireframe></velt-transcription-summary-text-wireframe>
</velt-wireframe>

ExpandToggle

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltTranscriptionWireframe.EmbedMode.Panel.Summary.ExpandToggle>
        <VeltTranscriptionWireframe.EmbedMode.Panel.Summary.ExpandToggle.On />
        <VeltTranscriptionWireframe.EmbedMode.Panel.Summary.ExpandToggle.Off />
    </VeltTranscriptionWireframe.EmbedMode.Panel.Summary.ExpandToggle>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-transcription-summary-expand-toggle-wireframe>
        <velt-transcription-summary-expand-toggle-on-wireframe></velt-transcription-summary-expand-toggle-on-wireframe>
        <velt-transcription-summary-expand-toggle-off-wireframe></velt-transcription-summary-expand-toggle-off-wireframe>
    </velt-transcription-summary-expand-toggle-wireframe>
</velt-wireframe>

On

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltTranscriptionWireframe.EmbedMode.Panel.Summary.ExpandToggle.On />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-transcription-summary-expand-toggle-on-wireframe></velt-transcription-summary-expand-toggle-on-wireframe>
</velt-wireframe>

Off

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltTranscriptionWireframe.EmbedMode.Panel.Summary.ExpandToggle.Off />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-transcription-summary-expand-toggle-off-wireframe></velt-transcription-summary-expand-toggle-off-wireframe>
</velt-wireframe>

Content

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltTranscriptionWireframe.EmbedMode.Panel.Content>
        <VeltTranscriptionWireframe.EmbedMode.Panel.Content.Item />
    </VeltTranscriptionWireframe.EmbedMode.Panel.Content>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-transcription-content-wireframe>
        <velt-transcription-content-item-wireframe></velt-transcription-content-item-wireframe>
    </velt-transcription-content-wireframe>
</velt-wireframe>

Item

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltTranscriptionWireframe.EmbedMode.Panel.Content.Item>
        <VeltTranscriptionWireframe.EmbedMode.Panel.Content.Item.Text />
        <VeltTranscriptionWireframe.EmbedMode.Panel.Content.Item.Time />
    </VeltTranscriptionWireframe.EmbedMode.Panel.Content.Item>
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-transcription-content-item-wireframe>
        <velt-transcription-content-item-text-wireframe></velt-transcription-content-item-text-wireframe>
        <velt-transcription-content-item-time-wireframe></velt-transcription-content-item-time-wireframe>
    </velt-transcription-content-item-wireframe>
</velt-wireframe>

Text

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltTranscriptionWireframe.EmbedMode.Panel.Content.Item.Text />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-transcription-content-item-text-wireframe></velt-transcription-content-item-text-wireframe>
</velt-wireframe>

Time

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltTranscriptionWireframe.EmbedMode.Panel.Content.Item.Time />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-transcription-content-item-time-wireframe></velt-transcription-content-item-time-wireframe>
</velt-wireframe>

Concepts

Async Collaboration

Realtime Collaboration

Transcription

Overview

FloatingMode

Button

Tooltip

PanelContainer

Panel

CloseButton

CopyLink

Button

Tooltip

Summary

Text

ExpandToggle

On

Off

Content

Item

Text

Time

EmbedMode

Panel

CloseButton

CopyLink

Button

Tooltip

Summary

Text

ExpandToggle

On

Off

Content

Item

Text

Time

​Overview

​FloatingMode

​Button

​Tooltip

​PanelContainer

​Panel

​CloseButton

​CopyLink

​Button

​Tooltip

​Summary

​Text

​ExpandToggle

​On

​Off

​Content

​Item

​Text

​Time

​EmbedMode

​Panel

​CloseButton

​CopyLink

​Button

​Tooltip

​Summary

​Text

​ExpandToggle

​On

​Off

​Content

​Item

​Text

​Time

Overview

FloatingMode

Button

Tooltip

PanelContainer

Panel

CloseButton

CopyLink

Button

Tooltip

Summary

Text

ExpandToggle

On

Off

Content

Item

Text

Time

EmbedMode

Panel

CloseButton

CopyLink

Button

Tooltip

Summary

Text

ExpandToggle

On

Off

Content

Item

Text

Time