web/index.html

<!DOCTYPE html>
<html>
<head>
    <title>Tock Bot</title>
    <meta charset="UTF-8"/>
    <!-- React -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <!-- React DOM -->
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <!-- Emotion CORE -->
    <script crossorigin src="https://unpkg.com/@emotion/core@10/dist/core.umd.min.js"></script>
    <!-- Emotion STYLE -->
    <script crossorigin src="https://unpkg.com/@emotion/styled@10/dist/styled.umd.min.js"></script>
    <!-- Emotion THEMING -->
    <script crossorigin src="https://unpkg.com/emotion-theming@10/dist/emotion-theming.umd.min.js"></script>
    <!-- Tock Widget -->
    <script src="https://unpkg.com/tock-react-kit@latest/build/tock-react-kit.umd.js"></script>
    <!-- Font -->
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" />
</head>

<body>
<div id="app"></div>

<script>
    //render the widget
    TockReact.renderChat(
        document.getElementById('app'),
        //Set your web connector url here
        'http://localhost:8080/[relative web connector rest path]',
        //Set referralParameter
        '',
        //options: https://github.com/theopenconversationkit/tock-react-kit/blob/master/src/styles/theme.ts#L13
        {
            palette: {
                background: {
                    bot: '#0A2342',
                    card: '#FFFDF7',
                },
            },
            sizing: {
                borderRadius: '1em',
            },
            typography: {
                fontFamily: 'Montserrat, Arial, Helvetica, sans-serif',
                fontSize: '16px',
            },
            overrides: {
                chat: `background-image: radial-gradient(circle 79vh at bottom center, #84BC9C, #2CA58D); width: 50%; margin: auto 25%; border-radius: 1%; min-height: 800px; max-height: 800px;`,
                quickReply: `background: #F46197; color: #FFFDF7; border-color: #FFFDF7;`,
                card: `& button { background: #F46197; color: #FFFDF7; border-color: #FFFDF7; }`,
            }
        }
    );
</script>
</body>
</html>