“Speech Bubble” Component

Overview

The component is used to display a user’s photo with a speech bubble. In most pf the cases, the text is the same, that’s why we have assistant sub-component with a predefined message.

Hello! This is a text from the default slot.

Usage

@component('components.speechBubble', ['speakingMember' => $member])
    Hello! This is a text from the default slot.
@endcomponent

Props

speakingMember (required)

App\Modules\Member\Models\Member

Member instance to use photo and contact info.

Slots

default

string (HTML)

Custom speech message to display in a bubble.

Assistant sub-component

assistantis an extended version of thr speechBubble component. The only different is the default text: assistant has a default text, but still can be customized via default slot.

Default text:

Hi, I’m Mads. Need help? Check out our FAQs or reach me at hello@interaction-design.org.

Custom text:

How can I help you?

// Default text
@component('components.assistant', ['member' => $member])
@endcomponent

// Custom text
@component('components.assistant', ['member' => $member])
    How can I help you?
@endcomponent