{"_id":"564e0de843817f17002a5ecc","__v":25,"parentDoc":null,"project":"564de2dbfe07a81700b5c3a5","version":{"_id":"564de2dbfe07a81700b5c3a8","project":"564de2dbfe07a81700b5c3a5","__v":10,"createdAt":"2015-11-19T14:55:23.838Z","releaseDate":"2015-11-19T14:55:23.837Z","categories":["564de2ddfe07a81700b5c3a9","564df317826645210097a890","564df3217c8f372b00b934df","564e5227c3553e0d003e53ba","5666dac5d784a70d00397bcb","56cd08ddd98d851d00c0c3bd","56e9a50946bfd60e008840a7","5718e37bf8f7de1900683fad","58c3308dfedf070f0043b72c","58ce99c75457d02300560c0a"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"user":"564de2b4fe07a81700b5c3a4","category":{"_id":"564df317826645210097a890","project":"564de2dbfe07a81700b5c3a5","__v":5,"pages":["564e0de843817f17002a5ecc","564e0e5ea910003500a0ca38","564e19e3bc4e172d00b9534e","56f168612a85600e00ea3dcb","56f17465dbe4cc1700a66a7a"],"version":"564de2dbfe07a81700b5c3a8","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-11-19T16:04:39.832Z","from_sync":false,"order":2,"slug":"javascript","title":"JavaScript"},"updates":["591eb6ce2c1b1f0f000faa1a","597035777c0fd30038b24063","597f37ac878132001ee24be6"],"next":{"pages":[],"description":""},"createdAt":"2015-11-19T17:59:04.099Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"Cards provide you with responsive and shareable embeds to drive the reach of your websites, blog posts, and articles. Our [code generator](http://embed.ly/code) makes it super simple to create a card of any site.\n\nThe follow explains how to use platform.js to programmatically create cards.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Basics\"\n}\n[/block]\nThis adds [platform.js](doc:platformjs) to your site and loads the script asynchronously. By\ndefault ``platform.js`` will create a card for an ``A`` tag or ``BLOCKQUOTE``\nwith the class ``embedly-card``. For example, this will create a card for\nembed.ly:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \" <a href=\\\"http://embed.ly\\\" class=\\\"embedly-card\\\">Embedly</a>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nAnd this will also create a card:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \" <blockquote class=\\\"embedly-card\\\">\\n    <h4><a href=\\\"http://embed.ly/docs\\\">Documentation</a></h4>\\n    <p>\\n      Embedly's Documentation is the best.\\n    </p>\\n  </blockquote>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nThe difference here, is that the ``H4`` will become the title of the Card and\nthe ``P`` text will become the description.\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Customize\"\n}\n[/block]\nThere are a number of ``data-card-*`` attributes that you can use to customize\nthe card. They are as follows:\n\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Attribute\",\n    \"h-1\": \"Value\",\n    \"h-2\": \"Description\",\n    \"0-0\": \"data-card-via\",\n    \"0-1\": \"URL i.e http://embed.ly\",\n    \"0-2\": \"Specifies the via content in the card. It's a great way to do attribution.\",\n    \"1-0\": \"data-card-chrome\",\n    \"1-1\": \"\\\"1\\\", \\\"0\\\"\",\n    \"1-2\": \"Chrome of 0 will remove the left hand colored border.\",\n    \"2-0\": \"data-card-theme\",\n    \"2-1\": \"\\\"light\\\", \\\"dark\\\"\",\n    \"2-2\": \"For dark backgrounds it's better to specify the dark theme.\",\n    \"3-0\": \"data-card-image\",\n    \"4-0\": \"data-card-embed\",\n    \"5-0\": \"data-card-controls\",\n    \"6-0\": \"data-card-width\",\n    \"7-0\": \"data-card-align\",\n    \"8-0\": \"data-card-recommend\",\n    \"3-1\": \"URL i.e. http://embed.ly/image.jpg\",\n    \"4-1\": \"URL i.e. https://vimeo.com/62648882\",\n    \"5-1\": \"\\\"1\\\", \\\"0\\\"\",\n    \"6-1\": \"\\\"100%\\\", \\\"300px\\\", etc.\",\n    \"7-1\": \"\\\"left\\\", \\\"center\\\", \\\"right\\\"\",\n    \"8-1\": \"\\\"1\\\", \\\"0\\\"\",\n    \"7-2\": \"Align the card, Default: \\\"center\\\"\",\n    \"6-2\": \"Sets the width of the card. Specifically the max-width, so card is still responsive.\",\n    \"5-2\": \"Enable Share Icons. Default: \\\"1\\\"\",\n    \"4-2\": \"Instead of using the static page content, the card will embed the video or rich media.\",\n    \"3-2\": \"Specify which image to use in article cards.\",\n    \"8-2\": \"Disable Embedly Recommendations on video and rich cards. Default: 1\",\n    \"9-0\": \"data-card-key\",\n    \"9-1\": \"\\\"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\\\"\",\n    \"9-2\": \"You Embedly API Key. If you are a paid user this will remove Embedly's branding from the cards.\"\n  },\n  \"cols\": 3,\n  \"rows\": 10\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Javascript\"\n}\n[/block]\nPlatform.js has some pretty interesting features for customizing cards further. For example, if you do not want to use a custom class instead of ``embedly-card`` you can use the following code:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"embedly('card', '.card-this');\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nIf you would like to create a card from a single element you can do the\nfollowing:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \" var a = document.getElementById('#myCard');\\n embedly('card', a);\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nLastly if you would like to limit the cards to only embed certain types of\nmedia you can pass in a ``types`` argument::\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"embedly('card', {types: ['rich', 'video', 'image']});\\n\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nor with a custom selector as well:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"embedly('card', {selector: 'a.embed', types: ['article', 'image']});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nIf ``platform.js`` has not loaded yet, it will queue actions till we are ready\nto act on them.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Listeners\"\n}\n[/block]\nWhen using cards in non-standard displays you may want to listen to some events. Cards supports the following events.\n\n**``card.rendered``**\n\nWhen the card has actually been rendered.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"embedly('on', 'card.rendered', function(iframe){\\n  // iframe is the card iframe that we used to render the event.\\n  $card = $(iframe);\\n\\n  // Grab the width and height.\\n  console.log($card.width(), $card.height());\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n**``card.resize``**\n\nWhen the card has been resized. We do this fairly often when the browser window has changed size, or the content in the card has changed.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"embedly('on', 'card.resize', function(iframe){\\n  // iframe is the card iframe that we used to render the event.\\n  $card = $(iframe);\\n\\n  // Grab the width and height.\\n  console.log($card.width(), $card.height());\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Defaults\"\n}\n[/block]\nIf you would like to set options globally instead of per card you use\n``defaults``. Here's an example of setting all the cards to align right with a\nwidth of 700px and remove the chrome.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"embedly(\\\"defaults\\\", {\\n  cards: {\\n    key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',\\n    width: 700,\\n    align: 'right',\\n    chrome: 0\\n  }\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nNote that data attributes on the card override these defaults. If you wish for the defaults to override the data attributes, you can add ``override: true`` like so:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"embedly(\\\"defaults\\\", {\\n  cards: {\\n    override: true,\\n    width: '90%',\\n    ...\\n  }\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Player\"\n}\n[/block]\nEmbedly gives you programmatic control of embedded video via [Player.js](https://github.com/embedly/player.js/) and we've expanded that to Cards as well. Player allows you to play, pause, seek and listen to events for cards with video. Here's a quick example:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"embedly('player', function(player){\\n  console.log(player.url) // URL of the media that we are operating on.\\n\\n  // When the user pauses a video, perform an action.\\n  player.on('pause', function(){\\n    //display modal.\\n  });\\n\\n  // Autoplay all the videos that support Player.js\\n  player.play()\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nLearn more about the [Player functionality](doc:player)\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Integrations\"\n}\n[/block]\nCards integrate with 3rd Party Analytics, such as Google Analytics, so you can track card performance wherever you like. While we think our Analytics are pretty awesome, we know that it won't fit with everyone's workflow. \n\nLearn mote about [Integrations](doc:integrations) \n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"CSS Customization\"\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"CSS is only available on a paid plan.\",\n  \"body\": \"You can upgrade inside [app.embed.ly](https://app.embed.ly)\"\n}\n[/block]\nEmbedly allows you to customize the styles inside a card. If you want to change the font or colors of the card than this feature is for you! There are a couple of ways to pass styles into a card. We will outline them here. \n\n## inline\nYou can specify the css styles inline via a `style` tag. Embedly will look for a single `style` tag with the `embedly-css` and use that CSS.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<style class=\\\"embedly-css\\\">\\n  :::at:::import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);\\n  .card {\\n    font-family: 'Open Sans Condensed', sans-serif;\\n  }\\n  .card a, .card .action {\\n    color: red;\\n  }\\n  .hdr {\\n    display:none;\\n  }\\n</style>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n## link\nYou can specify a stylesheet for Embedly to place inside the card via a `link` tag. Embedly will look for a single `link` tag with the `embedly-css` and use that CSS.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<head>\\n  ...\\n\\t<link rel=\\\"stylesheet\\\" href=\\\"http://example.com/styles/card.css\\\">\\n</head>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n## defaults\nLastly you can pass the css through defaults like so:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"embedly(\\\"defaults\\\", {\\n  cards: {\\n    key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',\\n\\t\\tcss: 'http://example.com/styles/card.css'\\n  }\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n## demo\n[block:embed]\n{\n  \"html\": \"<iframe class=\\\"embedly-embed\\\" src=\\\"//cdn.embedly.com/widgets/media.html?url=https%3A%2F%2Fjsfiddle.net%2FvuwLcpw1%2F%3Fheight%3D600%26tabs%3Dresult%2Chtml&src=https%3A%2F%2Fjsfiddle.net%2FvuwLcpw1%2Fembedded%2Fresult%2Chtml%2F&type=text%2Fhtml&key=02466f963b9b4bb8845a05b53d3235d7&schema=jsfiddle\\\" width=\\\"600\\\" height=\\\"600\\\" scrolling=\\\"no\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\",\n  \"url\": \"https://jsfiddle.net/vuwLcpw1/?height=600&tabs=result,html\",\n  \"title\": \"Edit fiddle - JSFiddle\",\n  \"favicon\": \"https://jsfiddle.net/favicon.png\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Remove Branding\"\n}\n[/block]\nCards includes a \"powered by Embedly\" logo at the bottom of every card. If you would like to removed this branding, you can upgrade to a the embed product in [app.embed.ly](https://app.embed.ly/ar?path=settings%2Fplan).\n\nAny card created through [app.embed.ly](https://app.embed.ly) will have branding removed within 24 hours due to browser caching. \n\nFor cards not generated through app.embed.ly you must include your API key, found [here](https://app.embed.ly/ar?path=api%2Fkey). You can do this one of two ways.\n\n### On the Card\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<a href=\\\"embedly-card\\\" data-card-key=\\\"XXXXXXXXXXXX\\\" href=\\\"http://embed.ly\\\"></a>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n### Via JavaScript\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"embedly(\\\"defaults\\\", {\\n  cards: {\\n    key: 'XXXXXXXXXXXX',\\n  }\\n});\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]","excerpt":"","slug":"cards","type":"basic","title":"Cards"}

Documentation

API

JavaScript

Player.js

Tutorials

Video

Integrations

Cards

Cards provide you with responsive and shareable embeds to drive the reach of your websites, blog posts, and articles. Our [code generator](http://embed.ly/code) makes it super simple to create a card of any site. The follow explains how to use platform.js to programmatically create cards. [block:api-header] { "type": "basic", "title": "Basics" } [/block] This adds [platform.js](doc:platformjs) to your site and loads the script asynchronously. By default ``platform.js`` will create a card for an ``A`` tag or ``BLOCKQUOTE`` with the class ``embedly-card``. For example, this will create a card for embed.ly: [block:code] { "codes": [ { "code": " <a href=\"http://embed.ly\" class=\"embedly-card\">Embedly</a>", "language": "html" } ] } [/block] And this will also create a card: [block:code] { "codes": [ { "code": " <blockquote class=\"embedly-card\">\n <h4><a href=\"http://embed.ly/docs\">Documentation</a></h4>\n <p>\n Embedly's Documentation is the best.\n </p>\n </blockquote>", "language": "html" } ] } [/block] The difference here, is that the ``H4`` will become the title of the Card and the ``P`` text will become the description. [block:api-header] { "type": "basic", "title": "Customize" } [/block] There are a number of ``data-card-*`` attributes that you can use to customize the card. They are as follows: [block:parameters] { "data": { "h-0": "Attribute", "h-1": "Value", "h-2": "Description", "0-0": "data-card-via", "0-1": "URL i.e http://embed.ly", "0-2": "Specifies the via content in the card. It's a great way to do attribution.", "1-0": "data-card-chrome", "1-1": "\"1\", \"0\"", "1-2": "Chrome of 0 will remove the left hand colored border.", "2-0": "data-card-theme", "2-1": "\"light\", \"dark\"", "2-2": "For dark backgrounds it's better to specify the dark theme.", "3-0": "data-card-image", "4-0": "data-card-embed", "5-0": "data-card-controls", "6-0": "data-card-width", "7-0": "data-card-align", "8-0": "data-card-recommend", "3-1": "URL i.e. http://embed.ly/image.jpg", "4-1": "URL i.e. https://vimeo.com/62648882", "5-1": "\"1\", \"0\"", "6-1": "\"100%\", \"300px\", etc.", "7-1": "\"left\", \"center\", \"right\"", "8-1": "\"1\", \"0\"", "7-2": "Align the card, Default: \"center\"", "6-2": "Sets the width of the card. Specifically the max-width, so card is still responsive.", "5-2": "Enable Share Icons. Default: \"1\"", "4-2": "Instead of using the static page content, the card will embed the video or rich media.", "3-2": "Specify which image to use in article cards.", "8-2": "Disable Embedly Recommendations on video and rich cards. Default: 1", "9-0": "data-card-key", "9-1": "\"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx\"", "9-2": "You Embedly API Key. If you are a paid user this will remove Embedly's branding from the cards." }, "cols": 3, "rows": 10 } [/block] [block:api-header] { "type": "basic", "title": "Javascript" } [/block] Platform.js has some pretty interesting features for customizing cards further. For example, if you do not want to use a custom class instead of ``embedly-card`` you can use the following code: [block:code] { "codes": [ { "code": "embedly('card', '.card-this');", "language": "javascript" } ] } [/block] If you would like to create a card from a single element you can do the following: [block:code] { "codes": [ { "code": " var a = document.getElementById('#myCard');\n embedly('card', a);", "language": "javascript" } ] } [/block] Lastly if you would like to limit the cards to only embed certain types of media you can pass in a ``types`` argument:: [block:code] { "codes": [ { "code": "embedly('card', {types: ['rich', 'video', 'image']});\n", "language": "javascript" } ] } [/block] or with a custom selector as well: [block:code] { "codes": [ { "code": "embedly('card', {selector: 'a.embed', types: ['article', 'image']});", "language": "javascript" } ] } [/block] If ``platform.js`` has not loaded yet, it will queue actions till we are ready to act on them. [block:api-header] { "type": "basic", "title": "Listeners" } [/block] When using cards in non-standard displays you may want to listen to some events. Cards supports the following events. **``card.rendered``** When the card has actually been rendered. [block:code] { "codes": [ { "code": "embedly('on', 'card.rendered', function(iframe){\n // iframe is the card iframe that we used to render the event.\n $card = $(iframe);\n\n // Grab the width and height.\n console.log($card.width(), $card.height());\n});", "language": "javascript" } ] } [/block] **``card.resize``** When the card has been resized. We do this fairly often when the browser window has changed size, or the content in the card has changed. [block:code] { "codes": [ { "code": "embedly('on', 'card.resize', function(iframe){\n // iframe is the card iframe that we used to render the event.\n $card = $(iframe);\n\n // Grab the width and height.\n console.log($card.width(), $card.height());\n});", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Defaults" } [/block] If you would like to set options globally instead of per card you use ``defaults``. Here's an example of setting all the cards to align right with a width of 700px and remove the chrome. [block:code] { "codes": [ { "code": "embedly(\"defaults\", {\n cards: {\n key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',\n width: 700,\n align: 'right',\n chrome: 0\n }\n});", "language": "javascript" } ] } [/block] Note that data attributes on the card override these defaults. If you wish for the defaults to override the data attributes, you can add ``override: true`` like so: [block:code] { "codes": [ { "code": "embedly(\"defaults\", {\n cards: {\n override: true,\n width: '90%',\n ...\n }\n});", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "Player" } [/block] Embedly gives you programmatic control of embedded video via [Player.js](https://github.com/embedly/player.js/) and we've expanded that to Cards as well. Player allows you to play, pause, seek and listen to events for cards with video. Here's a quick example: [block:code] { "codes": [ { "code": "embedly('player', function(player){\n console.log(player.url) // URL of the media that we are operating on.\n\n // When the user pauses a video, perform an action.\n player.on('pause', function(){\n //display modal.\n });\n\n // Autoplay all the videos that support Player.js\n player.play()\n});", "language": "javascript" } ] } [/block] Learn more about the [Player functionality](doc:player) [block:api-header] { "type": "basic", "title": "Integrations" } [/block] Cards integrate with 3rd Party Analytics, such as Google Analytics, so you can track card performance wherever you like. While we think our Analytics are pretty awesome, we know that it won't fit with everyone's workflow. Learn mote about [Integrations](doc:integrations) [block:api-header] { "type": "basic", "title": "CSS Customization" } [/block] [block:callout] { "type": "info", "title": "CSS is only available on a paid plan.", "body": "You can upgrade inside [app.embed.ly](https://app.embed.ly)" } [/block] Embedly allows you to customize the styles inside a card. If you want to change the font or colors of the card than this feature is for you! There are a couple of ways to pass styles into a card. We will outline them here. ## inline You can specify the css styles inline via a `style` tag. Embedly will look for a single `style` tag with the `embedly-css` and use that CSS. [block:code] { "codes": [ { "code": "<style class=\"embedly-css\">\n @import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);\n .card {\n font-family: 'Open Sans Condensed', sans-serif;\n }\n .card a, .card .action {\n color: red;\n }\n .hdr {\n display:none;\n }\n</style>", "language": "html" } ] } [/block] ## link You can specify a stylesheet for Embedly to place inside the card via a `link` tag. Embedly will look for a single `link` tag with the `embedly-css` and use that CSS. [block:code] { "codes": [ { "code": "<head>\n ...\n\t<link rel=\"stylesheet\" href=\"http://example.com/styles/card.css\">\n</head>", "language": "html" } ] } [/block] ## defaults Lastly you can pass the css through defaults like so: [block:code] { "codes": [ { "code": "embedly(\"defaults\", {\n cards: {\n key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',\n\t\tcss: 'http://example.com/styles/card.css'\n }\n});", "language": "javascript" } ] } [/block] ## demo [block:embed] { "html": "<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?url=https%3A%2F%2Fjsfiddle.net%2FvuwLcpw1%2F%3Fheight%3D600%26tabs%3Dresult%2Chtml&src=https%3A%2F%2Fjsfiddle.net%2FvuwLcpw1%2Fembedded%2Fresult%2Chtml%2F&type=text%2Fhtml&key=02466f963b9b4bb8845a05b53d3235d7&schema=jsfiddle\" width=\"600\" height=\"600\" scrolling=\"no\" frameborder=\"0\" allowfullscreen></iframe>", "url": "https://jsfiddle.net/vuwLcpw1/?height=600&tabs=result,html", "title": "Edit fiddle - JSFiddle", "favicon": "https://jsfiddle.net/favicon.png" } [/block] [block:api-header] { "type": "basic", "title": "Remove Branding" } [/block] Cards includes a "powered by Embedly" logo at the bottom of every card. If you would like to removed this branding, you can upgrade to a the embed product in [app.embed.ly](https://app.embed.ly/ar?path=settings%2Fplan). Any card created through [app.embed.ly](https://app.embed.ly) will have branding removed within 24 hours due to browser caching. For cards not generated through app.embed.ly you must include your API key, found [here](https://app.embed.ly/ar?path=api%2Fkey). You can do this one of two ways. ### On the Card [block:code] { "codes": [ { "code": "<a href=\"embedly-card\" data-card-key=\"XXXXXXXXXXXX\" href=\"http://embed.ly\"></a>", "language": "html" } ] } [/block] ### Via JavaScript [block:code] { "codes": [ { "code": "embedly(\"defaults\", {\n cards: {\n key: 'XXXXXXXXXXXX',\n }\n});", "language": "javascript" } ] } [/block]