Guides

Introducing Wordcab Components

Share on:

What is the Wordcab Components library?

The Wordcab Components library helps you quickly embed interactive visual elements in your app and seamlessly visualize output from our API.

When you send a call transcript or audio file to Wordcab’s /summarize endpoint (read more about it here), you get back a structured transcript and summary. This JSON output can be directly fed to the Wordcab Components function to instantly visualize your summary, transcript, and audio data. It takes only a few minutes to get started.

How do you start using Wordcab Components?

To start using Wordcab Components, include the CSS URL in your <head> tag and the script URL near your closing </body> tag.

<!doctype html>
<html lang="en">
<head>
    <title>Wordcab Example</title>
    ...
    <!-- Load in the Wordcab Components CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Wordcab/wordcab-components@main/wordcab-components/components.css">
</head>

<body>
    ...
    <!-- Load the Wordcab Components library -->
    <script src="https://cdn.jsdelivr.net/gh/Wordcab/wordcab-components@main/wordcab-components/components.js"></script>
</body>
</html>

CSS: https://cdn.jsdelivr.net/gh/Wordcab/wordcab-components@main/wordcab-components/components.css

JS: https://cdn.jsdelivr.net/gh/Wordcab/wordcab-components@main/wordcab-components/components.js

You’re about a third of the way there!

What kind of components can you use?

Wordcab Components currently comes with three styled visual elements: a summary element (which supports Wordcab's narrative type summaries), a transcript element, and an audio playback element.

The coolest part about these components is that they’re interactive and interconnected. So if you click on any part of any element, it will jump to the same position in the corresponding elements. This opens up some awesome use cases - first and foremost being able to rapidly hone in on a particular part of a conversation you’d like to hear.

This is best demonstrated visually. In our introduction video to Wordcab Components, you can see them in action at the 0:22 second mark.

So you can click on a part of the summary, and quickly jump to that portion of the audio and the transcript, and vice versa. It’s an amazingly effective way to “navigate by summary”.

On the HTML side, all you have to do is add the wordcab-summary, wordcab-transcript, and wordcab-player attributes to any tag.

<body>
    <div id="app">
        <main>
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <div wordcab-summary class="p-3"></div>
                    </div>
                    <div class="col-md-6">
                        <div class="p-3">
                            <div wordcab-player class="mb-3"></div>
                            <div wordcab-transcript></div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</body>

What do you need to do on the JavaScript side?

On the script side, you just need the raw output from the Wordcab /summaries and/or /transcripts endpoints (currently, you need to provide the matching audio file via URL or local file).

If you haven’t checked out the Wordcab API docs, click here to learn more about starting a summary job, click here for more on the Summaries endpoint, and here for the Transcripts endpoint.

Store the summary and transcript JSON output in variables and feed them directly to the Wordcab Components function:

const wordcabComponents = new wordcab({
    audioPath: './my_sample_audio.mp3',
    summaryData: summary,
    transcriptData: transcript
});

That’s pretty much it. There’s much more we can get into in terms of parameters and styling (that we’ll save for a future blog), but for now, the best way to begin would be to watch our introductory video and clone our example app.

Happy Summarizing!

. . .
avatar

Aleks Smechov

Founder at Wordcab
View Articles

Aleks is the founder at Wordcab.