const { registerSegmentRenderer } = window.aparte;
// A type of your own, drawn by a renderer of your own: here a small forecast card.
registerSegmentRenderer({
type: 'forecast',
render(segment) {
const card = document.createElement('div');
card.className = 'aparte-card';
const head = Object.assign(document.createElement('div'), { className: 'aparte-card__header', textContent: segment.city });
const body = Object.assign(document.createElement('div'), { className: 'aparte-card__body' });
body.textContent = segment.days.map((d) => `${d.day} ${d.high}°`).join(' · ');
card.append(head, body);
return card;
},
});
document.querySelector('aparte-chat-bubble').setSegments([
{ id: 's1', type: 'text', content: 'The next three days in Lille:' },
{ id: 's2', type: 'forecast', city: 'Lille', days: [{ day: 'Thu', high: 14 }, { day: 'Fri', high: 16 }, { day: 'Sat', high: 12 }] },
]);