Hoe Maak Je Widgets met Perplexity AI? Stap-voor-stap Gids Met Voorbeelden

Moderne illustratie van een webontwikkelaar die met Perplexity AI een dynamische widget maakt, met codefragmenten en een laptopscherm waarop blogartikelen te zien zijn.

Widgets zijn onmisbare bouwstenen voor websites en bieden dynamische inhoud en interactieve functionaliteit aan bezoekers. Met moderne AI-tools zoals Perplexity AI is het zelf maken van zulke widgets gemakkelijker dan ooit—zelfs zonder diepe programmeerkennis. In dit artikel leer je hoe je met Perplexity AI een krachtige blogwidget bouwt, inclusief alle details, codevoorbeelden en tips voor het schrijven van effectieve AI-prompts.

Wat is Perplexity AI en waarom is het handig voor widget-ontwikkeling?

Perplexity AI combineert de kracht van natuurlijke taalverwerking met actuele data om gedetailleerde antwoorden en code te genereren op basis van je vragen. In plaats van alleen tekstuele antwoorden, kan Perplexity AI ook programmeercode leveren die je rechtstreeks in je website kunt gebruiken. Dit versnelt je ontwikkelprocessen en maakt het bouwen van widgets toegankelijker voor iedereen.

Een AI zoals Perplexity werkt het beste met heldere en gedetailleerde instructies. Een goede prompt:

Beschrijft precies wat de widget moet doen
Geeft aan hoe het eruit moet zien (bijv. afbeeldingen boven tekst, hover-effecten)
Noemt technische eisen zoals responsive design, embed-functionaliteit, scrollbare layout
Vraagt om uitbreidingen zoals een embed-knop en modale pop-up

Een voorbeeld van zo’n prompt zou zijn:

"Maak een widget die d.m.v. JavaScript en RSS-feed de 8 nieuwste blogartikelen toont, met afbeeldingen boven titels, een hover-effect, een scrollbare max hoogte van 600px, een embed-knop die een modale popup opent met embed-code die men kan kopiëren. De widget moet responsive zijn en een logo bovenaan met link naar de blog bevatten."

Zonder concrete details kan de AI je bedoeling missen of onvolledige code leveren.

Stap 1: RSS-feed uitlezen en artikelen tonen

De basis van onze widget is het ophalen van RSS-feed data in JSON via rss2json en deze dynamisch tonen met JavaScript.


js
async function renderTechSnap() {
  const response = await fetch('https://api.rss2json.com/v1/api.json?rss_url=https://techsnapgadgets.blogspot.com/feeds/posts/default');
  const data = await response.json();
  const container = document.getElementById('ts-feed');
  container.innerHTML = '';
  
  data.items.slice(0,8).forEach(item => {
    const img = item.description.match(/<img[^>]+src="([^">]+)"/)?.[1] || 'https://via.placeholder.com/600x300?text=TechSnap';
    const text = item.description.replace(/<[^>]*>/g, '').substring(0, 120) + '...';

    const card = document.createElement('div');
    card.style.maxWidth = '540px';
    card.style.margin = '18px auto';
    card.style.border = '1px solid #ddd';
    card.style.borderRadius = '12px';
    card.style.overflow = 'hidden';
    card.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
    card.style.background = '#fff';
    card.style.cursor = 'pointer';
    card.style.transition = 'transform 0.3s, box-shadow 0.3s';
    card.onmouseover = () => {
      card.style.transform = 'scale(1.03)';
      card.style.boxShadow = '0 6px 18px rgba(0,0,0,0.25)';
    };
    card.onmouseout = () => {
      card.style.transform = 'scale(1)';
      card.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
    };
    card.onclick = () => window.open(item.link, '_blank');

    const imgEl = document.createElement('img');
    imgEl.src = img;
    imgEl.style.width = '100%';
    imgEl.style.height = '200px';
    imgEl.style.objectFit = 'cover';
    
    const contentDiv = document.createElement('div');
    contentDiv.style.padding = '14px';
    contentDiv.style.textAlign = 'center';

    const title = document.createElement('h4');
    title.textContent = item.title;
    title.style.margin = '0';
    title.style.color = '#e60000';
    title.style.fontWeight = '600';
    title.style.fontSize = '20px';

    const desc = document.createElement('p');
    desc.textContent = text;
    desc.style.color = '#444';
    desc.style.fontSize = '14px';
    desc.style.marginTop = '10px';
    desc.style.lineHeight = '1.5';

    contentDiv.appendChild(title);
    contentDiv.appendChild(desc);
    card.appendChild(imgEl);
    card.appendChild(contentDiv);
    container.appendChild(card);
  });
}
renderTechSnap();

Stap 2: Styling voor de widget

Gebruik deze CSS om het uiterlijk consistent, modern en responsief te maken, inclusief scrollbar-styling:


css
#ts-feed {
  max-height: 600px;
  overflow-y: auto;
  padding-right: 6px;
  box-sizing: border-box;
}

#ts-feed::-webkit-scrollbar {
  width: 8px;
}

#ts-feed::-webkit-scrollbar-thumb {
  background: #e60000;
  border-radius: 4px;
}

#ts-feed::-webkit-scrollbar-track {
  background: #f0f0f0;
}

.glass-embed-btn {
  padding: 8px 16px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, rgba(230,0,0,0.8), rgba(80,0,120,0.8));
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}

.glass-embed-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 0 20px rgba(140,0,80,0.6);
}

Stap 3: Embed-functionaliteit met modale pop-up

Een EMBED knop opent een pop-up waarin de gebruikers de volledige embedcode kunnen kopiëren.


xml
<button class="glass-embed-btn" onclick="openEmbed()">EMBED</button>

<div id="embedModal" style="display:none; background: rgba(0,0,0,0.6); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999;">
  <div style="background: #fff; max-width: 650px; margin: 5% auto; padding: 20px; border-radius: 10px;">
    <h3 style="color:#e60000; text-align:center;">TechSnap-widget embedden</h3>
    <textarea id="embedCode" readonly style="width: 100%; height: 280px; font-family: monospace; font-size: 13px; background: #f9f9f9; border: 1px solid #ddd; resize:none;"></textarea>
    <button onclick="copyEmbed()" style="margin-top:10px; padding:10px; background:#333; color:white; border:none; border-radius:6px; cursor:pointer;">📋 Kopieer code</button>
    <p id="copyMsg" style="display:none; color:green; text-align:center; font-weight:bold;"></p>
    <button onclick="closeEmbed()" style="margin-top:15px; padding:10px; background:#e60000; color:white; border:none; border-radius:6px; cursor:pointer;">Sluiten</button>
  </div>
</div>

En JavaScript:


js
const embedCodeText = `<!-- TechSnap Embedded Widget Start -->
<div id="techsnap-embed"></div>
<script>
  async function renderTechSnapEmbed() {
    const res = await fetch("https://api.rss2json.com/v1/api.json?rss_url=https://techsnapgadgets.blogspot.com/feeds/posts/default");
    const data = await res.json();
    const c = document.getElementById("techsnap-embed");
    c.innerHTML = "";
    (data.items||[]).slice(0,8).forEach(i => {
      let img = (i.description.match(/<img[^>]+src="([^">]+)"/)||[])[1] || "https://via.placeholder.com/600x300?text=TechSnap";
      let txt = i.description.replace(/<[^>]*>/g,"").substring(0,120) + "...";
      c.innerHTML += \`
        <div style="max-width:540px; margin:15px auto; border:1px solid #ddd; border-radius:12px; overflow:hidden; box-shadow:0 3px 10px rgba(0,0,0,0.15);">
          <a href="\${i.link}" target="_blank" style="text-decoration:none; color:inherit;">
            <img src="\${img}" style="width:100%; height:200px; object-fit:cover;">
            <div style="padding:12px; text-align:center;">
              <h4 style="margin:0; color:#e60000; font-size:18px;">\${i.title}</h4>
              <p style="margin:8px 0 0; color:#444; font-size:14px; line-height:1.5;">\${txt}</p>
            </div>
          </a>
        </div>\`;
    });
  }
  renderTechSnapEmbed();
</script>
<!-- TechSnap Embedded Widget End -->`;

document.addEventListener("DOMContentLoaded", () => {
  document.getElementById("embedCode").value = embedCodeText;
});

function openEmbed() {
  document.getElementById("embedModal").style.display = "block";
}

function closeEmbed() {
  document.getElementById("embedModal").style.display = "none";
}

function copyEmbed() {
  navigator.clipboard.writeText(embedCodeText).then(() => {
    const msg = document.getElementById("copyMsg");
    msg.textContent = "Gekopieerd!";
    msg.style.display = "block";
    setTimeout(() => (msg.style.display = "none"), 2000);
  });
}

Slotwoord

Widgets maken met Perplexity AI is een krachtige manier om je website te verrijken zonder uitgebreide codeerkennis. Begin met een heldere prompt: hoe gedetailleerder en preciezer, hoe beter de AI jouw behoeften kan vertalen naar perfect werkende code.

Met ons voorbeeld van de blogwidget maak je gebruik van actuele technieken en een slimme API om content dynamisch te laden. De embedfunctie maakt het eenvoudig om de widget overal te delen en te integreren.

Experimenteer, test en perfectioneer je prompts met Perplexity AI en bouw zelf de mooiste, meest functionele widgets voor je website!

Wil je, kan ik je ook helpen aanvullende widgets en tools te maken met Perplexity AI!

🌟 Friendhyve – beste Facebook-alternatief
🔒 Geen dataverkoop
⚡ 90% sneller
🇳🇱 Nederlandstalig
📝 Ideaal voor bloggers en publicisten
📈 Artikelen blijven chronologisch zichtbaar
🔗 Onbeperkte link- en media-embeds

Ticker

Ad Code

Hoe Maak Je Widgets met Perplexity AI? Stap-voor-stap Gids Met Voorbeelden

Wat is Perplexity AI en waarom is het handig voor widget-ontwikkeling?

Het belang van een duidelijke AI-prompt bij widgetontwikkeling

Widget maken met Perplexity AI: concreet voorbeeld

Stap 1: RSS-feed uitlezen en artikelen tonen

Stap 2: Styling voor de widget

Stap 3: Embed-functionaliteit met modale pop-up

Slotwoord

Gepost door Zohra Boelhouwers

Mogelijk vind je deze posts interessant

Een reactie posten

0 Reacties

Translate

Volg ons op Friendhyve

Advertenties

Adverteren

Zoeken in deze blog

Friendhyve, het beste Facebook alternatief

Featured posts

Tags

Meest populair

Laatste reacties:

Shoutbox

Widget

TechSnap-widget embedden

Archief

Links

RSS-feed

Willekeurige berichten

Populair

Footer Menu Widget

Contact form