Help with integrating a third-party script

Ask us anything
1

I’m reaching out to seek assistance with integrating a third-party script into a weweb page as I haven’t found anything on forum yet.

I have successfully developed an index.html file utilizing a third-party script, which functions seamlessly with HTML, presenting a user interface similar to a scatter chart. However, upon attempting to integrate this HTML with the script into http://weweb.io, I encountered difficulties as it fails to render anything.

After some investigation, I realized that HTML embed feature supports HTML tags exclusively and doesn’t accommodate third-party script tags, which seems to be the root cause of the issue.

Could you kindly provide guidance or suggest alternative approaches on how I can effectively integrate this third-party script into http://weweb.io? I am eager to ensure a smooth integration process and would greatly appreciate any assistance or recommendations you can offer.

2

Hi, could you share the HTML ? If you want to keep it private you can try to create a ticket on support.weweb.io and share it so we can inspect and tell you if it should work.

The HTML element should be able to load script, but you have to put something like and try to minimize you html before, sometimes line break cause issue when parsing your html

<div>test</div>
<script>console.log('my script one')</script>
<script src="url-script-2"></script>
3

Hello @Alexisn thank you for your reply.

Here’s my HTML file content:

<!DOCTYPE html>
<html>

<head>
    <title>Scatter Chart</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>

<body>
    <canvas id="myChart"></canvas>
    <script>
        const quadrants = {
            id: 'quadrants',
            beforeDraw(chart, args, options) {
                const { ctx, chartArea: { left, top, right, bottom }, scales: { x, y } } = chart;
                const midX = x.getPixelForValue(0);
                const midY = y.getPixelForValue(0);
                ctx.save();
                ctx.fillStyle = options.topLeft;
                ctx.fillRect(left, top, midX - left, midY - top);
                ctx.fillStyle = options.topRight;
                ctx.fillRect(midX, top, right - midX, midY - top);
                ctx.fillStyle = options.bottomRight;
                ctx.fillRect(midX, midY, right - midX, bottom - midY);
                ctx.fillStyle = options.bottomLeft;
                ctx.fillRect(left, midY, midX - left, bottom - midY);
                ctx.restore();
            }
        };

        const data = {
            datasets: [
                {
                    label: 'Dataset 1',
                    data: [
                        { x: -67.5, y: 75.44650206 },
                        { x: -67.5, y: 66.41975309 },
                        { x: -75.47325103, y: 52.41975309 },
                        { x: -75.47325103, y: 35.39643347 },
                        { x: -83.44650206, y: 47.39643347 }
                    ],
                    borderColor: 'rgb(75, 192, 192)',
                    backgroundColor: 'rgba(75, 192, 192, 0.5)',
                    pointBorderColor: 'rgba(75, 192, 192, 1)', // Border color
                    pointBorderWidth: 3, // Border width
                },
                // Repeat the same for other datasets
                {
                    label: 'Dataset 2',
                    data: [
                        { x: 67.5, y: 73.44650206 },
                        { x: 67.5, y: 61.41975309 },
                        { x: 75.47325103, y: 21.41975309 },
                        { x: 75.47325103, y: 37.39643347 },
                        { x: 83.44650206, y: 47.39643347 }
                    ],
                    borderColor: 'rgb(255, 99, 132)',
                    backgroundColor: 'rgba(255, 99, 132, 0.5)',
                    pointBorderColor: 'rgba(255, 99, 132, 1)',
                    pointBorderWidth: 3,
                },
                // Repeat the same for other datasets
                {
                    label: 'Dataset 3',
                    data: [
                        { x: -75.6303155, y: -44.65706447 },
                        { x: -66.6303155, y: -56.68381344 },
                        { x: -22.6303155, y: -66.68381344 },
                        { x: -42.6303155, y: -36.68381344 },
                        { x: -84.65706447, y: -46.68381344 },
                        { x: -74.65706447, y: -28.70713306 }
                    ],
                    borderColor: 'rgb(54, 162, 235)',
                    backgroundColor: 'rgba(54, 162, 235, 0.5)',
                    pointBorderColor: 'rgba(54, 162, 235, 1)',
                    pointBorderWidth: 3,
                },
                // Repeat the same for other datasets
                {
                    label: 'Dataset 4',
                    data: [
                        { x: 25.39643347, y: -44.65706447 },
                    ],
                    borderColor: 'rgb(153, 102, 255)',
                    backgroundColor: 'rgba(153, 102, 255, 0.5)',
                    pointBorderColor: 'rgba(153, 102, 255, 1)',
                    pointBorderWidth: 3,
                },
            ]
        };


        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'scatter',
            data: data,
            options: {
                plugins: {
                    quadrants: {
                        topLeft: 'rgba(255, 205, 86, 0.3)',
                        topRight: 'rgba(0, 128, 0, 0.3)',
                        bottomRight: 'rgba(255, 205, 86, 0.3)',
                        bottomLeft: 'rgba(255, 182, 193, 0.5)',
                    },
                    legend: {
                        display: false
                    },
                }
            },
            plugins: [quadrants],
        });
    </script>
</body>

</html>
4

The html, header and body part need to be removed, and I think we have an issue with the HTML element, it doesn’t work well when the code is not minified, we will try to improve it :slight_smile:

You can put this version, it should works

<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>const quadrants={id:"quadrants",beforeDraw(t,r,o){let{ctx:a,chartArea:{left:e,top:l,right:_,bottom:$},scales:{x:d,y:b}}=t,g=d.getPixelForValue(0),i=b.getPixelForValue(0);a.save(),a.fillStyle=o.topLeft,a.fillRect(e,l,g-e,i-l),a.fillStyle=o.topRight,a.fillRect(g,l,_-g,i-l),a.fillStyle=o.bottomRight,a.fillRect(g,i,_-g,$-i),a.fillStyle=o.bottomLeft,a.fillRect(e,i,g-e,$-i),a.restore()}},data={datasets:[{label:"Dataset 1",data:[{x:-67.5,y:75.44650206},{x:-67.5,y:66.41975309},{x:-75.47325103,y:52.41975309},{x:-75.47325103,y:35.39643347},{x:-83.44650206,y:47.39643347}],borderColor:"rgb(75, 192, 192)",backgroundColor:"rgba(75, 192, 192, 0.5)",pointBorderColor:"rgba(75, 192, 192, 1)",pointBorderWidth:3},{label:"Dataset 2",data:[{x:67.5,y:73.44650206},{x:67.5,y:61.41975309},{x:75.47325103,y:21.41975309},{x:75.47325103,y:37.39643347},{x:83.44650206,y:47.39643347}],borderColor:"rgb(255, 99, 132)",backgroundColor:"rgba(255, 99, 132, 0.5)",pointBorderColor:"rgba(255, 99, 132, 1)",pointBorderWidth:3},{label:"Dataset 3",data:[{x:-75.6303155,y:-44.65706447},{x:-66.6303155,y:-56.68381344},{x:-22.6303155,y:-66.68381344},{x:-42.6303155,y:-36.68381344},{x:-84.65706447,y:-46.68381344},{x:-74.65706447,y:-28.70713306}],borderColor:"rgb(54, 162, 235)",backgroundColor:"rgba(54, 162, 235, 0.5)",pointBorderColor:"rgba(54, 162, 235, 1)",pointBorderWidth:3},{label:"Dataset 4",data:[{x:25.39643347,y:-44.65706447},],borderColor:"rgb(153, 102, 255)",backgroundColor:"rgba(153, 102, 255, 0.5)",pointBorderColor:"rgba(153, 102, 255, 1)",pointBorderWidth:3},]};var ctx=document.getElementById("myChart").getContext("2d"),myChart=new Chart(ctx,{type:"scatter",data:data,options:{plugins:{quadrants:{topLeft:"rgba(255, 205, 86, 0.3)",topRight:"rgba(0, 128, 0, 0.3)",bottomRight:"rgba(255, 205, 86, 0.3)",bottomLeft:"rgba(255, 182, 193, 0.5)"},legend:{display:!1}}},plugins:[quadrants]});</script>

If you need to do it again, here the steps I followed

  1. I took what’s inside your body and put the script in the head aside
  2. I minified the javascript inside your second script with this tool => JavaScript Minifier & Compressor | Toptal®
  3. I removed the breakline at the start and end inside the script

Capture d’écran 2024-03-22 à 11.12.44
Capture d’écran 2024-03-22 à 11.12.44906×382 66.6 KB

1 Like