javascript - How to get script from termly to run in jsx on nextJS

I am using termly to help with drafting legals terms for a site I am constructing. They give me some html with a in it and I can't seem to be able to get it to run on a page in jsx. I have tried both Script and dangerouslyrunhtml from nextjs docs and have not had any luck.

Here is the code they give me:

<div name="termly-embed" data-id="7328cb16-7e1a-4e64-bebc-cd3a35107c64" data-type="iframe"></div>
<script type="text/javascript">(function(d, s, id) {
  var js, tjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = ".min.js";
  tjs.parentNode.insertBefore(js, tjs);
}(document, 'script', 'termly-jssdk'));</script>

Here is my attempt to embed it into a webpage index.jsx

import AppLayout from "../../layouts/AppLayout";
import Head from 'next/head'
import Script from "next/script";

const Privacy = () => {

    return (
        <AppLayout fullWidth={true}>
            <Head>
                <title>Citations - Facti</title>
            </Head>
            <div className="termly-embed" data-id="7328cb16-7e1a-4e64-bebc-cd3a35107c64" data-type="iframe"></div>
            <Script type="text/javascript">
                (function(d, s, id) {
                    var js, tjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id)) return;
                js = d.createElement(s); js.id = id;
                js.src = ".min.js";
                tjs.parentNode.insertBefore(js, tjs);
                }(document, 'script', 'termly-jssdk'));
            </Script>
        </AppLayout >
    );
}

export default Privacy;

This ends up giving me the following error that is related to AppLayouy, but if I take out the section given by termly it runs just fine:

pages/privacy/index.tsx
Error: 
  x Unexpected token `AppLayout`. Expected jsx identifier
    ,-[C:\Users\jonat\facti\client\pages\privacy\index.tsx:5:1]
  5 | const Privacy = () => {
  6 | 
  7 |     return (
  8 |         <AppLayout fullWidth={true}>
    :          ^^^^^^^^^
  9 |             <Head>
 10 |                 <title>Citations - Facti</title>
 10 |             </Head>
    `----

Caused by:
    Syntax Error

EDIT:

Here is another attempt using Script from NextJS. The page loads with no errors, but nothing displays. Not sure if this is a termly issue or my code.

import AppLayout from "../../layouts/AppLayout";
import Head from 'next/head'
import Script from "next/script";

const Privacy = () => {

    return (
        <AppLayout fullWidth={true}>
            <Head>
                <title>Citations - Facti</title>
            </Head>
            <div className="termly-embed" data-id="7328cb16-7e1a-4e64-bebc-cd3a35107c64" data-type="iframe"></div>
            <Script id="id-is-required-for-inline-scripts">
                {
                    `(function(d, s, id) {
                        var js, tjs = d.getElementsByTagName(s)[0];
                        if (d.getElementById(id)) return;
                        js = d.createElement(s); js.id = id;
                        js.src = ".min.js";
                        tjs.parentNode.insertBefore(js, tjs);
                    }(document, 'script', 'termly-jssdk'));`
                }
            </Script>
        </AppLayout >
    );
}

export default Privacy;

Here is the code they give me:

<div name="termly-embed" data-id="7328cb16-7e1a-4e64-bebc-cd3a35107c64" data-type="iframe"></div>
<script type="text/javascript">(function(d, s, id) {
  var js, tjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "https://app.termly.io/embed-policy.min.js";
  tjs.parentNode.insertBefore(js, tjs);
}(document, 'script', 'termly-jssdk'));</script>

Here is my attempt to embed it into a webpage index.jsx

import AppLayout from "../../layouts/AppLayout";
import Head from 'next/head'
import Script from "next/script";

const Privacy = () => {

    return (
        <AppLayout fullWidth={true}>
            <Head>
                <title>Citations - Facti</title>
            </Head>
            <div className="termly-embed" data-id="7328cb16-7e1a-4e64-bebc-cd3a35107c64" data-type="iframe"></div>
            <Script type="text/javascript">
                (function(d, s, id) {
                    var js, tjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id)) return;
                js = d.createElement(s); js.id = id;
                js.src = "https://app.termly.io/embed-policy.min.js";
                tjs.parentNode.insertBefore(js, tjs);
                }(document, 'script', 'termly-jssdk'));
            </Script>
        </AppLayout >
    );
}

export default Privacy;

This ends up giving me the following error that is related to AppLayouy, but if I take out the section given by termly it runs just fine:

pages/privacy/index.tsx
Error: 
  x Unexpected token `AppLayout`. Expected jsx identifier
    ,-[C:\Users\jonat\facti\client\pages\privacy\index.tsx:5:1]
  5 | const Privacy = () => {
  6 | 
  7 |     return (
  8 |         <AppLayout fullWidth={true}>
    :          ^^^^^^^^^
  9 |             <Head>
 10 |                 <title>Citations - Facti</title>
 10 |             </Head>
    `----

Caused by:
    Syntax Error

EDIT:

Here is another attempt using Script from NextJS. The page loads with no errors, but nothing displays. Not sure if this is a termly issue or my code.

import AppLayout from "../../layouts/AppLayout";
import Head from 'next/head'
import Script from "next/script";

const Privacy = () => {

    return (
        <AppLayout fullWidth={true}>
            <Head>
                <title>Citations - Facti</title>
            </Head>
            <div className="termly-embed" data-id="7328cb16-7e1a-4e64-bebc-cd3a35107c64" data-type="iframe"></div>
            <Script id="id-is-required-for-inline-scripts">
                {
                    `(function(d, s, id) {
                        var js, tjs = d.getElementsByTagName(s)[0];
                        if (d.getElementById(id)) return;
                        js = d.createElement(s); js.id = id;
                        js.src = "https://app.termly.io/embed-policy.min.js";
                        tjs.parentNode.insertBefore(js, tjs);
                    }(document, 'script', 'termly-jssdk'));`
                }
            </Script>
        </AppLayout >
    );
}

export default Privacy;

Share Improve this question edited Feb 20, 2023 at 1:40 asked Feb 19, 2023 at 22:28 rockets4all 8963 gold badges11 silver badges40 bronze badges

Add a ment |

5 Answers 5

Sorted by: Reset to default 5

My solution for React (Next.js) sites (with typescript):

import { createElement, FC, useEffect } from 'react';

const TermlyScriptWrapper: FC<{ dataId: string }> = ({ dataId }) => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://app.termly.io/embed-policy.min.js';
    script.async = true;
    document.body.appendChild(script);
  }, []);

  if (!dataId) {
    return null;
  }
  return createElement('div', {
    name: 'termly-embed',
    'data-id': dataId,
    'data-type': 'iframe'
  });
};

export default TermlyScriptWrapper;

How to use it:

<TermlyScriptWrapper dataId={YOUR_ID} />

The easiest way is to copy the code Termly provides and loadit as HTML:

export default function Terms() {
    const termlyPolicy = `
        // PASTE HERE THE CODE FROM TERMLY
    `;

    return  <div className="p-6" dangerouslySetInnerHTML={{ __html: termlyPolicy }} />
}

Script is a React ponent so its content must be valid JSX. Check out the docs to see the props, requirements, and loading options.

<Script id="id-is-required-for-inline-scripts">
 {`(function(d, s, id)...rest-of-your-code`}
</Script>

Not quite sure what the code does but it appears that it might be possible to just use the Script ponent.

<Script id="termly-jssdk" src="https://app.termly.io/embed-policy.min.js" />
<div className="termly-embed" data-id="7328cb16-7e1a-4e64-bebc-cd3a35107c64" data-type="iframe" />

Instead of the Code Snippet from Termly, use the URL with an iframe:

export default function Cookies() {
return (
  <iframe
      className="h-full w-full flex-1"
      src="https://app.termly.io/policy-viewer/policy.html?policyUUID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
  ></iframe>
)}

This works for me to get my terms and conditions working at /terms. I used the same approach for the privacy statement and consent banner and they're all working fine.

What termly provides:

<div name="termly-embed" data-id="bc0f2-your-data-id-here"></div>
<script type="text/javascript">(function(d, s, id) {
  var js, tjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "https://app.termly.io/embed-policy.min.js";
  tjs.parentNode.insertBefore(js, tjs);
}(document, 'script', 'termly-jssdk'));</script>

What works in Nextjs

import Script from "next/script";

export default function Terms() {
  return (
    <>
      <div
        // @ts-expect-error
        name="termly-embed"
        data-id="bc0f2-your-data-id-here"
      ></div>

      <Script
        src="https://app.termly.io/embed-policy.min.js"
        strategy="afterInteractive"
      />
    </>
  );
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to get script from termly to run in jsx on nextJS - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)