HelpBot Assistant

How can I help you?

Custom message templates

20 Feb 202610 minutes to read

The Message component supports custom templates, enabling you to render complex or interactive message content beyond simple text. Templates allow you to embed HTML elements, React components, or dynamic content within the message body using the content property or by adding content directly to the component’s children.

The following example demonstrates a custom message template that combines HTML elements with React Button components for interactive messaging.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { MessageComponent } from '@syncfusion/ej2-react-notifications';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { useState } from 'react';

function App() {
    const [visible, setVisible] = useState(true);
    const [cssClass, setCssClass] = useState('e-outline e-primary e-success msg-hidden');
    const showClick = () => {
        setVisible(true);
        setCssClass('e-outline e-primary e-success msg-hidden');
    };
    const dismissClick = () => {
        setVisible(false);
    };
    const closed = () => {
        setCssClass('e-outline e-primary e-success');
    };
    const contentTemplate = () => {
        return (
            <div>
                <h1>Merged pull request</h1>
                <p>Pull request #41 merged after a successful build</p>
                <ButtonComponent id="commitBtn" cssClass="e-link" content="View commit" />
                <ButtonComponent id="closeBtn" cssClass="e-link" content="Dismiss" onClick={dismissClick.bind(this)} />
            </div>
        );
    };

    return (<div className="msg-template-section">
        <div className="content-section">
        <ButtonComponent id="showBtn" content="Show pull request" cssClass={cssClass} onClick={showClick.bind(this)} />
        <MessageComponent id="msg_template" visible={visible} content={contentTemplate.bind(this)} severity="Success" closed={closed.bind(this)} />
        </div>
    </div>);
}
export default App;
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MessageComponent } from '@syncfusion/ej2-react-notifications';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { useState } from 'react';

function App() {
    const [visible, setVisible] = useState<boolean>(true);
    const [cssClass, setCssClass] = useState<string>(
        'e-outline e-primary e-success msg-hidden'
    );
    const showClick = () => {
        setVisible(true);
        setCssClass('e-outline e-primary e-success msg-hidden');
    };
    const dismissClick = () => {
        setVisible(false);
    };
    const closed = () => {
        setCssClass('e-outline e-primary e-success');
    };
    const contentTemplate = () => {
        return (
            <div>
                <h1>Merged pull request</h1>
                <p>Pull request #41 merged after a successful build</p>
                <ButtonComponent id="commitBtn" cssClass="e-link" content="View commit" />
                <ButtonComponent id="closeBtn" cssClass="e-link" content="Dismiss" onClick={dismissClick.bind(this)} />
            </div>
        );
    };

  return (
    <div className="msg-template-section">
        <div className="content-section">
        <ButtonComponent id="showBtn" content="Show pull request" cssClass={cssClass} onClick={showClick.bind(this)} />
        <MessageComponent id="msg_template" visible={visible} content={contentTemplate.bind(this)} severity="Success" closed={closed.bind(this)} />
        </div>
    </div>
  );
}
export default App;
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Message</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-react-notifications/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
    <style>
        /* Sample level styles */
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }

        .msg-template-section .content-section {
            margin: 0 auto;
            max-width: 450px;
            padding-top: 20px;
        }

        .msg-template-section .e-btn.msg-hidden {
            display: none;
        }

        .msg-template-section .e-message h1 {
            margin: 0;
            font-size: 16px;
            font-weight: 600;
            line-height: 1.25;
        }

        .msg-template-section .e-message .e-msg-icon {
            padding: 0 4px;
            margin-top: 3px;
        }

        .msg-template-section .e-message p {
            margin: 8px 0 4px;
        }

        .msg-template-section .e-message .e-btn {
            padding: 0;
        }
    </style>
</body>

</html>