Product-Documentation

Source code

Pendo > Resource Center > Custom Module

HTML

<!-- This module also requires a script to be directly embedded within the Site Options > UI Configuration > HTML Includes > Add to HEAD element. This is necessary because Pendo does not support JavaScript imports -->

<!-- Import n8n chat styling -->
<link href="https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css" rel="stylesheet" />

<!-- n8n chat container -->
<div id="n8n-chat"></div>

CSS

#n8n-chat { width:100%; height:100%; }
.chat-header { display:none; }
.chat-layout { padding:0px; max-width:100%; border-radius:0px; }

:root {
	--chat--color-primary: #e74266;
	--chat--color-primary-shade-50: #db4061;
	--chat--color-primary-shade-100: #cf3c5c;
	--chat--color-secondary: #777980;
	--chat--color-secondary-shade-50: #1ca08a;
	--chat--color-white: #ffffff;
	--chat--color-light: #f2f4f8;
	--chat--color-light-shade-50: #e6e9f1;
	--chat--color-light-shade-100: #c2c5cc;
	--chat--color-medium: #d2d4d9;
	--chat--color-dark: #101330;
	--chat--color-disabled: #777980;
	--chat--color-typing: #404040;

	--chat--spacing: 1rem;
	--chat--border-radius: 0.25rem;
	--chat--transition-duration: 0.15s;

	--chat--window--width: 400px;
	--chat--window--height: 75%;

	--chat--header-height: auto;
	--chat--header--padding: var(--chat--spacing);
	--chat--header--background: var(--chat--color-dark);
	--chat--header--color: var(--chat--color-light);
	--chat--header--border-top: none;
	--chat--header--border-bottom: none;
	--chat--header--border-bottom: none;
	--chat--header--border-bottom: none;
	--chat--heading--font-size: 2em;
	--chat--header--color: var(--chat--color-light);
	--chat--subtitle--font-size: inherit;
	--chat--subtitle--line-height: 1.2;

	--chat--textarea--height: 50px;

	--chat--message--font-size: 1rem;
	--chat--message--padding: var(--chat--spacing);
	--chat--message--border-radius: var(--chat--border-radius);
	--chat--message-line-height: 1.2;
	--chat--message--bot--background: var(--chat--color-white);
	--chat--message--bot--color: var(--chat--color-dark);
	--chat--message--bot--border: none;
	--chat--message--user--background: var(--chat--color-secondary);
	--chat--message--user--color: var(--chat--color-white);
	--chat--message--user--border: none;
	--chat--message--pre--background: rgba(0, 0, 0, 0.05);
}
.chat-message-markdown { font-size:100% !important; }

JavaScript

// Displays the Pendo module (Kayako form) when the '#raise-ticket-link' is clicked.
// This allows users to submit a support ticket if the AI chatbot can't resolve their issue.
document.addEventListener('click', (event) => {
  const el = event.target;
  
  // Check that it's an anchor tag with the exact unique href
  if (el.tagName === 'A' && el.getAttribute('href') === '#raise-ticket-link') {
    event.preventDefault();
    pendo.showGuideById('FijjS6hlx6RJa7wpYF6AfumFceI@5yjhulKOOz2loUFwKLaE-wBFilU');
  }
});

// Initialises the n8n-powered OpenAI AI support chatbot.
loadAIChat();

---

Pageflex Storefront Site Options

HTML

<script src="https://assets.rightmarket.com/product/n8n-support-bot/script.js"></script>

---

assets.rightmarket.com

https://assets.rightmarket.com/product/n8n-support-bot/script.js

JavaScript

let chatInstance = null;

window.loadAIChat = async () => {
	
	try {
		
		const chatContainer = document.querySelector('#n8n-chat');

		// Re-create only if chatInstance doesn't exist OR the container is empty
		const shouldRecreate =
		!chatInstance ||
		!chatContainer ||
		chatContainer.children.length === 0;

		if (shouldRecreate) {
			
			// Ensure container exists before injecting chat again
			if (!chatContainer) {
				console.warn("#n8n-chat container is missing from the DOM. Cannot load chat.");
				return;
			}

			// Optionally clear the container (in case it's broken HTML)
			chatContainer.innerHTML = '';

			const { createChat } = await import('https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js');

			chatInstance = await createChat({
				webhookUrl: 'https://rightmarket.app.n8n.cloud/webhook/e07751cb-4572-4036-835c-8d94ba831761/chat',
				webhookConfig: {
					method: 'POST',
					headers: {}
				},
				target: '#n8n-chat',
				mode: 'fullscreen',
				chatInputKey: 'chatInput',
				chatSessionKey: 'sessionId',
				metadata: {},
				showWelcomeScreen: false,
				defaultLanguage: 'en',
				initialMessages: [
				'Hi there! ?Y‘‹ How can we help you today?'
				],
				i18n: {
					en: {
					title: '',
					subtitle: '',
					getStarted: 'New Conversation',
					inputPlaceholder: 'Type your message..',
					},
				},
			});
		}

		// Show the chat window
		if (chatInstance?.openWindow) {
			chatInstance.openWindow();
		}

	}
	catch (error) {
		console.error("Failed to load or initialize n8n chat:", error);
	}
};