A Google Sheet as cards
The cards below are rows of a public Google Sheet. Edit a cell in the sheet and this page shows the change on the next load.
Same grid on the WordPress site | View this page's source
Code to paste
This is all this page contains to show the grid above. Paste it in any HTML page (Webflow, Shopify, Wix, a static site): the script line is needed only once per page.
<script src="https://demo.swiffle-grid.com/wp-content/plugins/swiffle-grid-embed-data-anywhere/js/swiffle_embed_loader.js?v=1.15" data-src="https://demo.swiffle-grid.com/wp-content/plugins/swiffle-grid-embed-data-anywhere-pro/js/swifflegridpro.js?v=1.15" data-cache-version="1.15"></script> <swiffle-grid datak="eyJwcm94eSI6Imh0dHBzOlwvXC9kZW1vLnN3aWZmbGUtZ3JpZC5jb21cLyIsInBvc3RzY2F0ZWdvcnkiOiIiLCJwb3N0c3VybCI6Imh0dHBzOlwvXC9kb2NzLmdvb2dsZS5jb21cL3NwcmVhZHNoZWV0c1wvZFwvZVwvMlBBQ1gtMXZTX0FHZ0ozQUkxQ1Q5RDZ0dGtNdEhXTk9CR21sWHAxbUJLVzBwUzdRUGtpUUp1UDBNRXU3Z0hYdHV3QkpfdnRSUkFXbGdkLXhPQ1RZRzhcL3B1Yj9naWQ9MCZzaW5nbGU9dHJ1ZSZvdXRwdXQ9Y3N2IiwicG9zdHNzb3VyY2UiOiJnc2hlZXQiLCJjYXJkYWJzdHJhY3RzaG93IjoiZmFsc2UiLCJjYXJkYWJzdHJhY3RzaG93cCI6ImZhbHNlIiwiY2FyZGltZ3BjdCI6IjEwMCIsImNhcmRpbWdwY3RwIjoiMTAwIiwiY2FyZGljb25zaG93IjoiZmFsc2UiLCJjYXJkZmxvd3RpdGxlc2hvdyI6ImZhbHNlIiwiY29tcG9uZW50cGF0aCI6Imh0dHBzOlwvXC9kZW1vLnN3aWZmbGUtZ3JpZC5jb21cL3dwLWNvbnRlbnRcL3BsdWdpbnNcL3N3aWZmbGUtZ3JpZC1lbWJlZC1kYXRhLWFueXdoZXJlXC9jc3NcLyIsImJsb2NraWQiOiIiLCJjYXJkaWQiOiIiLCJvcmRlcmJ5IjoiZGF0ZSxERVNDIiwiZmlsdGVydGl0bGUiOiIiLCJmb2xsb3dwYWdlZmlsdGVyIjoidHJ1ZSIsImZvbGxvd3VybGZpbHRlciI6InRydWUiLCJmaWx0ZXJidG5zaG93IjoidHJ1ZSIsInNob3dub2RhdGFlcnIiOiJ0cnVlIiwiY2FyZGdhbGxlcnkiOiJzbGlkZSIsImJsb2NrZGVmbGF5b3V0Ijoid3JhcCIsImJsb2Nrc2hvd2xheW91dCI6InJvdyIsImJsb2NrZGVmbGF5b3V0cCI6IndyYXAiLCJibG9ja3Nob3dsYXlvdXRwIjoic3dpcGVmdWxsIiwiYmxvY2tjYXJkc3BlcnBnIjoiMjAiLCJibG9ja2NhcmRzcGVycGdwIjoiMTIiLCJibG9ja2xhbmciOiJ3cCIsImNhcmR3aWR0aCI6IjMwMHB4IiwiY2FyZHdpZHRocCI6IjMwMHB4IiwiY2FyZHdpZHRobWF4IjoiOTB2dyIsImNhcmR3aWR0aG1heHAiOiI5MHZ3IiwiY2FyZGhlaWdodCI6IjQwMHB4IiwiY2FyZGhlaWdodHAiOiI0MDBweCIsImNhcmRnYXAiOiIxMHB4IiwiY2FyZGdhcHAiOiIxMHB4IiwiY2FyZHRpdGxlb3ZlcnBpY3R1cmUiOiJ0cnVlIiwiY2FyZHRpdGxlb3ZlcnBpY3R1cmVwIjoidHJ1ZSIsImNhcmRjbGljayI6Im1vZGFsXC84MCIsImNhcmRjbGlja3AiOiJmbGlwIiwiY2FyZGltZ3NpemUiOiJsYXJnZSIsImNhcmRpbWdzaXplcCI6ImxhcmdlIiwiY2FyZHJhZGl1c3B4bCI6IjUiLCJjYXJkcmFkaXVzcHhscCI6IjUiLCJjYXJkaW1ncmFkaXVzcHhsIjoiMCIsImNhcmRpbWdyYWRpdXNweGxwIjoiMCIsImNhcmRkaXJlY3Rpb24iOiJjb2x1bW4iLCJjYXJkZGlyZWN0aW9ucCI6ImNvbHVtbiIsImNhcmRpY29uc2hvd3AiOiJ0cnVlIiwiY2FyZGltZ2FkanVzdGluIjoiY292ZXIiLCJjYXJkaW1nYWRqdXN0aW5wIjoiY292ZXIiLCJjYXJkc2luZ2xlc3R5bGUiOiJzd2lmZmxlIiwiY2FyZHRpdGxlZm9udHNpemUiOiIxNnB4IiwiY2FyZHRpdGxlZm9udHNpemVwIjoiMTZweCIsImNhcmRmbG93dGl0bGUiOiIiLCJjYXJkbmF2dXJsIjoiIyIsImNhcmRuYXZzaG93IjoidHJ1ZSIsImNhcmRjb250ZW50b25seSI6ImZhbHNlIiwiYmxvY2tzaG93Y29tbWVudHMiOiJ0cnVlIiwiY2FyZGJnY29sb3IiOiIjZmZmZmZmIiwiY2FyZGZ0Y29sb3IiOiIjMTExMTExIiwiY2FyZGJnY29sb3J0aXRsZSI6IiM0N2JjZDQiLCJjYXJkZnRjb2xvcnRpdGxlIjoiI2ZmZmZmZiIsImNhcmRiZ2NvbG9yYnV0dG9uIjoiIzk1NTVhZiIsImNhcmRmdGNvbG9yYnV0dG9uIjoiI2ZmZmZmZiIsImNhcmRiZ2NvbG9yY29tbWVudHMiOiIjZjNmM2YzIiwibWluaWNhcnRidG5zaG93IjoidHJ1ZSIsIm1pbmljYXJ0YnRuc2hvd3AiOiJ0cnVlIiwibWluaWNhcnRidG5zaGFwZSI6IlNGIiwibWluaWNhcnRidG5zaGFwZXAiOiJTRiIsIm1pbmljYXJ0YnRubG9jYXRpb24iOiJSIiwibWluaWNhcnRidG5sb2NhdGlvbnAiOiJSIiwibWluaWNhcnRidG5zZWxlY3RvciI6IiNzaXRlLWhlYWRlci1jYXJ0IiwibWluaWNhcnRidG5zZWxlY3RvcnAiOiIjc2l0ZS1oZWFkZXItY2FydCIsIm1pbmljYXJ0YnRubWFyZ2luIjoiMjB2aCIsIm1pbmljYXJ0YnRubWFyZ2lucCI6IjIwdmgiLCJtaW5pY2FydGljbyI6ImJhZyIsIm1pbmljYXJ0bG9naW4iOiJ0cnVlIiwiY2FyZHByaWNlb3ZlcnBpY3R1cmUiOiJmYWxzZSIsImNhcmRwcmljZW92ZXJwaWN0dXJlcCI6ImZhbHNlIiwiY2FyZHByaWNlc2hvdyI6InRydWUiLCJjYXJkcHJpY2VzaG93cCI6InRydWUiLCJjYXJkdG9jYXJ0c2hvdyI6InRydWUiLCJjYXJkdG9jYXJ0c2hvd3AiOiJ0cnVlIiwiY2FyZHJhdGVzaG93IjoidHJ1ZSIsImNhcmRyYXRlc2hvd3AiOiJ0cnVlIiwiY2FyZG9wdGlvbnNzaG93IjoidHJ1ZSIsImNhcmRvcHRpb25zc2hvd3AiOiJ0cnVlIiwiY2FyZGJ0Y2FydHNpemUiOiI3IiwiY2FyZGJ0Y2FydHNpemVwIjoiMTAiLCJjYXJkY2FydGJ0bnJuZCI6InRydWUiLCJjYXJkYmdjb2xvcm1pbmljYXJ0IjoiIzk1NTVhZiIsImNhcmRmdGNvbG9ybWluaWNhcnQiOiIjZmZmZmZmIiwiY2FyZGJnY29sb3JhbHIiOiIjZmYwMDAwIiwiY2FyZGZ0Y29sb3JhbHIiOiIjZmZmZjAwIiwic3Rhcmdvb2Rjb2xvciI6IiNmZmQ3MDAiLCJzdGFyYmFkY29sb3IiOiIjYmRiZGJkIiwiY2FyZGFscm92ZXJwaWN0dXJlIjoidHJ1ZSIsImNhcmRhbHJvdmVycGljdHVyZXAiOiJ0cnVlIiwiY2FyZHByb21vc2hvdyI6InNwaW4ifQ=="></swiffle-grid>
To show your own grid on your own site, the WordPress site that holds the data must allow the address of the page where you paste the code. How it works