Embed Pakistani Recipes on Your Site
Share our authentic Pakistani recipes on your blog, food website, or social platform with a beautiful, responsive widget. It's free and takes just one line of code.
Live Demo
Here's what the recipe card looks like on your site. Try switching recipes below to see different styles and layouts.
Preview
Recipe Selector
Tip: As you select different recipes, the embed code below will automatically update with the correct data attributes.
How to Embed
Step 1: Copy the Embed Code
Click the button below to copy the embed code for your selected recipe. Then paste it anywhere in your HTML where you want the recipe card to appear.
<script src="https://pakistani.recipes/embed.js"
data-recipe="breakfast/lahori-halwa-puri"
data-title="Lahori Halwa Puri with Channay"
data-image="lahori-halwa-puri.webp"
data-prep="45 mins"
data-cook="60 mins"
data-servings="4 servings"></script>
Step 2: Customize (Optional)
Edit the data attributes in the embed code to match your recipe. Here's what each attribute does:
| Attribute | Purpose | Example |
|---|---|---|
| data-recipe | URL path to the recipe on pakistani.recipes | breakfast/lahori-halwa-puri |
| data-title | Name of the recipe | Lahori Halwa Puri |
| data-image | Recipe image filename (in /images/recipes/) | lahori-halwa-puri.webp |
| data-prep | Prep time (optional) | 45 mins |
| data-cook | Cook time (optional) | 60 mins |
| data-servings | Servings (optional) | 4 servings |
Step 3: Paste into Your Site
Paste the code into your HTML. The script will automatically:
- Create a beautiful recipe card using Shadow DOM (styles won't conflict with your site)
- Make it fully responsive for mobile and desktop
- Add a "Powered by Pakistani Recipes" backlink (which helps us grow!)
- Load the recipe card in under 3KB
That's it! Your recipe card will appear with warm Pakistani cuisine colors, a recipe image, prep/cook times, and a link to the full recipe on our site.
Frequently Asked Questions
Can I customize the card's colors?
The embed card uses warm Pakistani cuisine colors (saffron gold and turmeric tones) by design to maintain brand consistency. The colors automatically adjust for dark mode. If you need a completely custom color scheme, contact us about API partnerships or custom implementations.
Can I use this for commercial sites?
Yes! Our embed widget is free for all sites — personal blogs, recipe aggregators, food publications, and commercial sites. The only requirement is that you keep the "Powered by Pakistani Recipes" backlink in the footer, which helps us grow.
Is the code lightweight and performant?
Absolutely. The embed.js file is under 3KB (minified), vanilla JavaScript with no dependencies. It uses Shadow DOM to isolate styles, so it won't conflict with your site's CSS. All data is passed via data attributes — no external API calls.
What if I want multiple recipes on the same page?
Just paste multiple script tags, one for each recipe. The embed.js will automatically find all of them and render a card for each. Each card is independent and won't interfere with the others.
Can I remove or change the backlink?
We ask that you keep the backlink as-is. It's a small footer that credits us and helps people discover more authentic Pakistani recipes. That said, if you're interested in an alternative embedding arrangement, please get in touch.
What if I have questions or find a bug?
We'd love to hear from you! Send us a message on our contact page or email us. We're constantly improving the widget based on feedback from food bloggers and creators.
Ready to Share Authentic Pakistani Recipes?
Start embedding our recipes on your blog today. It's free, beautiful, and helps both of us build a community around authentic Pakistani cuisine.