Chat trigger embeded on a WordPress site

Questions
,
1

Describe the problem/error/question

I’m trying to embed a n8n chat workflow into my WordPress site. I’m using a plugin for this, but I tried several ones and the problem appears with all of them. If I use a self hosted instance it works without problem, but if I use an account at n8n cloud, I received a security warning that it didn’t open the chat. I tried with different CORS combination but still don’t work

What is the error message (if any)?

Para proteger su seguridad, fiborg.app.n8n.cloud no permitirá que Nightly muestre la página si otro sitio la ha incrustado. Para ver esta página, debe abrirla en una nueva ventana

To protect your security, fiborg.app.n8n.cloud will not allow Nightly to display the page if another site has embedded it. To view this page, you must open it in a new window.

Please share your workflow

(Select the nodes on your canvas and use the keyboard shortcuts CMD+C/CTRL+C and CMD+V/CTRL+V to copy and paste the workflow.)

Share the output returned by the last node

Information on your n8n setup

  • n8n version: [email protected]
  • Database (default: SQLite): default
  • n8n EXECUTIONS_PROCESS setting (default: own, main): own
  • Running n8n via (Docker, npm, n8n cloud, desktop app): n8n cloud
  • Operating system:
2

Hey, I found this chat plugin that has CDN embed option, which talks to your workflow chat via webhooks, so no embedding happens. Have you tried that approach?

If you haven’t please try this method and let me know how it goes :slight_smile:

3

Thanks, I’m starting with this, should I install npm chat package in a server, right? I think that our plan don’t let us make this (is a wordpress plan).

4

If you use the CDN example, all you need to do is really paste that excerpt into your page’s html:

<link href="https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css" rel="stylesheet" />
<script type="module">
	import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js';

	createChat({
		webhookUrl: 'YOUR_PRODUCTION_WEBHOOK_URL'
	});
</script>
5

Thanks both, this method works.

6

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.