0

I am new to web development and have been practicing React by building a site. I need to embed multiple JS scripts to display 360 tours on the site. But can't get it to work. When I use the JS script embed it does not appear on site.

I have included the script in the public/index.html head as follow:

  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    
      <script 
        src="https://static.kuula.io/embed.js" 
        data-kuula="https://kuula.co/share/collection/7FN30?logo=-1&info=0&fs=1&vr=1&zoom=1&initload=0&thumbs=1" 
        data-css="ku-embed">  
      </script>

    <title>React App</title>

  </head>

Here is my code within the component:

import React from 'react';
import "./portfolio.css";
import { CTA } from '../../components';

const Portfolio = () => {
  return (
    <div className='portfolio' id="portfolio">
      <div className="portfolio-heading">
        <h1>Examples</h1>
        <p>Experience virtual tours from the customer perspective</p>
      </div>
        <div className="portfolio-cards">
            <div className="card-container-card">
              <div className="card-container-card-img">
              <script 
                src="https://static.kuula.io/embed.js" 
                data-kuula="https://kuula.co/share/collection/7FN30?logo=-1&info=0&fs=1&vr=1&zoom=1&initload=0&thumbs=1" 
                data-css="ku-embed">  
              </script>
              </div>
            <div className="card-container-card-title">
              <p>Revel x Plato</p>
            </div>
          </div>
        </div>
      < CTA />
    </div>
  )
}

export default Portfolio
Michael Davidson
  • 13
  • 1
  • Can you try to add the scripts inside body tag? –  Feb 08 '23 at 06:09
  • The script now appears in the body, but before the contents of the root, and not in the specified div. A element has also appeared in the public/index.html Here is a screenshot https://imgur.com/a/2Wlx7gU – Michael Davidson Feb 08 '23 at 06:18
  • My bad then. I probably didn't understand what you wanted to do –  Feb 08 '23 at 06:25
  • https://hackernoon.com/how-to-add-script-tags-in-react Check out this article –  Feb 08 '23 at 06:27

0 Answers0