Skip to main content
Markdown

Customizing the screens in PHP

The call screen, the chat and the list of who is online can be made part of the design of your app, or changed down to their code, with your AI coding agent or by hand. Each step goes further than the last: making the screens your own has every detail.

1. The look​

The elements draw in a shadow root, and their colours are custom properties your page sets:

/* public/app.css */
wordplus-calls, wordplus-chat, wordplus-online {
    --bm-color-accent: 37, 99, 235;      /* red, green, blue */
    --bm-messenger-font: Inter, system-ui, sans-serif;
    --bm-radius-card: 14px;
}

2. A piece of your own​

Your stylesheet reaches each piece by its name, and a <template slot> draws one with your own markup:

wordplus-chat::part(message) { font-size: 15px; }
wordplus-calls::part(call-controls) { bottom: 24px; }
<!-- order.php -->
<wordplus-chat room="order-chat:<?= (int) $order['id'] ?>" messages="/orders/<?= (int) $order['id'] ?>/messages">
    <template slot="empty-conversation"><p>Ask us anything about this order.</p></template>
</wordplus-chat>

<wordplus-calls>
    <template slot="control" data-control="order" data-label="Show the order" data-icon="edit"></template>
</wordplus-calls>

<script>
    document.addEventListener( 'wordplus-control', ( e ) => { if ( e.detail.control === 'order' ) showOrder(); } );
</script>

Every part, every template and what fills it: on any page.

3. The code itself​

Copy a view into your app. It is React, built once into your own elements script with Node:

npm install @wordplus/realtime-ui
npm install -D react react-dom esbuild
npx @wordplus/realtime-ui add chat
node wordplus-ui.build.mjs          # public/wordplus-ui.js, with your copy
const rt = await connect( { ...window.wordplusRealtimeConfig, ui: '/wordplus-ui.js' } );   // yours in place of ours

The view is yours now: components/wordplus/chat/, and what runs the conversation stays in the package. Build again after each change, and deploy public/wordplus-ui.js with your PHP. Check it with its tests (npx vitest run components/wordplus) and every state in the preview (npx @wordplus/realtime-ui preview). When ours changes, npx @wordplus/realtime-ui diff shows what to merge.

With your AI coding agent​

The agent skill of the package teaches it all of this. Ask for what you want, such as "make the chat bubbles square", and it changes the screens at the step that does it, then runs the tests and looks at the preview.