# Iframe usage within anki cards

**URL:** <https://forums.ankiweb.net/t/iframe-usage-within-anki-cards/317>\
**Category:** Help\
**Created:** [June 19, 2020, 5:38am UTC](https://forums.ankiweb.net/t/iframe-usage-within-anki-cards/317 "2020-06-19T05:38:01Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![likea](https://avatars.discourse-cdn.com/v4/letter/l/90db22/32.png) [@likea](https://forums.ankiweb.net/u/likea)\
**Post date:** [June 19, 2020, 5:38am UTC](https://forums.ankiweb.net/t/iframe-usage-within-anki-cards/317/1 "2020-06-19T05:38:01Z")

</div>

Hello!  
I came across this post yesterday and it blew my mind.  
[https://ankiweb.net/shared/info/2109889812](https://ankiweb.net/shared/info/2109889812)  
Specifically, this part: "You can put this deck on steroids by inserting the following snippet at the bottom of the answer HTML for each template (“Cards…” in editor or browser). Your answers will show the corresponding Wikipedia article for each answer. This really helped me find connections and learn faster.

– replace {{Country}} with {{Capital}} for Country -\> Capital card type  
– if your deck is in another language, swap the “en” in the wikipedia link for your language (e.g. “de” for german)"

It works like a charm and I felt like it opened up a whole world of possibilities coz now, I can make a deck directly with keywords, linking them up to suitable webpages so that I don’t have to make notes myself. However, it does not seem to be working with any other website. I am not great at HTML, so I might be missing something here.

Can someone please tell me how I can make this work for any website?

Thanks!

---

<div class="post-metadata">

**Author:** ![mmdj2](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/mmdj2/32/124_2.png) [@mmdj2](https://forums.ankiweb.net/u/mmdj2)\
**Post date:** [June 19, 2020, 6:09am UTC](https://forums.ankiweb.net/t/iframe-usage-within-anki-cards/317/2 "2020-06-19T06:09:32Z")

</div>

the websites should have a specific pattern for their pages for this method to work  
on wikipedia for example:  
[https://en.wikipedia.org/wiki/](https://en.wikipedia.org/wiki/) **ukraine**  
[https://en.wikipedia.org/wiki/](https://en.wikipedia.org/wiki/) **germany**  
[https://en.wikipedia.org/wiki/](https://en.wikipedia.org/wiki/) **united\_kingdom**

all of them have the same template.  
so if you have a field that holds the country name, you can put **[https://en.wikipedia.org/wiki/](https://en.wikipedia.org/wiki/){{FIELD NAME}}** in your card template and the country name at the end of the link will change based on the name that is stored in **FIELD NAME**

so if you wanna do the same thing with other websites, you should check if the pages on the website have some sort of pattern or not.

 ![not helo](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/218045611f3b6041a93ce6b2ad32d59c33f16093.png)  
compare **[http://website.example/{{Country}](http://website.example/%7B%7BCountry%7D)}** and **[http://website.example/{{Country}](http://website.example/%7B%7BCountry%7D)}/{{Info}}** in front template with the text that it generates on preview.

---

<div class="post-metadata">

**Author:** ![likea](https://avatars.discourse-cdn.com/v4/letter/l/90db22/32.png) [@likea](https://forums.ankiweb.net/u/likea)\
**Post date:** [June 19, 2020, 10:09am UTC](https://forums.ankiweb.net/t/iframe-usage-within-anki-cards/317/3 "2020-06-19T10:09:21Z")

</div>

Hey mate! Thanks for the reply.  
Yes, these addresses follow a pattern, but shouldn’t it open any web page since it is a browser window?  
Like, if I place a web address in the a field and use curly brackets should it not open that web page?

I occasionally don’t find wiki articles on the topics which I am interested in. Would be nice to be able to add a specific website when needed.

Thanks!

---

<div class="post-metadata">

**Author:** ![mmdj2](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/mmdj2/32/124_2.png) [@mmdj2](https://forums.ankiweb.net/u/mmdj2)\
**Post date:** [June 19, 2020, 1:02pm UTC](https://forums.ankiweb.net/t/iframe-usage-within-anki-cards/317/4 "2020-06-19T13:02:02Z")

</div>

you want to add a link to a field and you want it to be clickable?  
if that’s what you want there are 2 ways of doing it

1. you can dedicate fields to links. each field can be used for one link
2. you can learn using html editor and add hypertext tags there. in this way you can add multiple links to a field.

here’s how you do them:

1. create an extra field on your note type -\> press “Fields…” on add card dialog and press “Add” and choose a name for your field
2. go to card template editor -\> press “Cards…” on add card dialog
3. add this to your card template -\> ![Annotation 2020-06-19 083908](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/84ecec1e296b2b413250f3b30216a0a516a861c0.png)  
this makes the link in **Field name** clickable  
  
  

the other way to make them clickable is to open html editor (press “Ctrl+Shift+X” on add card dialog) and manually add hypertext tags to your cards  
 ![blah](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/1339ae8ee49a2a90241f060dfb4702067c8fb6ba.png)

---

<div class="post-metadata">

**Author:** ![likea](https://avatars.discourse-cdn.com/v4/letter/l/90db22/32.png) [@likea](https://forums.ankiweb.net/u/likea)\
**Post date:** [June 19, 2020, 2:26pm UTC](https://forums.ankiweb.net/t/iframe-usage-within-anki-cards/317/5 "2020-06-19T14:26:22Z")

</div>

Thanks again for the prompt reply!  
I am aware about adding links actually. I wanted there to be a window within anki which displays the webpage directly.  
Here’s an example.

 ![Screenshot_2020-06-19-19-50-45-122_com.ichi2.anki](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/fa83847bf075d02a285234242b2d1d4a5add6b78.jpeg)

I know it might seem like it is not a big deal, that clicking the link has the same effect, and so I should just use it, and I agree, I might end up doing that if I cannot figure this out, but knowing that it works makes me want to use this way. It is much better, that’s why.

Thanks!

---

<div class="post-metadata">

**Author:** ![mmdj2](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/mmdj2/32/124_2.png) [@mmdj2](https://forums.ankiweb.net/u/mmdj2)\
**Post date:** [June 19, 2020, 3:01pm UTC](https://forums.ankiweb.net/t/iframe-usage-within-anki-cards/317/6 "2020-06-19T15:01:41Z")

</div>

i misunderstood you. thought you just wanted the links to be clickable so you could open them.  
[Here’s what you’re looking for tho](https://stackoverflow.com/a/11535041)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/8f1279ababc5879d54e4838989f606cfe55af8c7.jpeg) [@system](https://forums.ankiweb.net/u/system)\
**Post date:** [May 1, 2023, 5:42am UTC](https://forums.ankiweb.net/t/iframe-usage-within-anki-cards/317/7 "2023-05-01T05:42:52Z")

</div>


