[{"data":1,"prerenderedAt":257},["ShallowReactive",2],{"DefaultLayouten":3,"language-blog-slug-upgrade-your-dato-cms-experience-with-custom-plugins-i18n-slugs":134,"language-blog-slug-en-upgrade-your-dato-cms-experience-with-custom-plugins":138},{"app":4,"menu":31,"footer":66},{"githubUrl":5,"youtubeUrl":6,"linkedinUrl":7,"phoneNumber":8,"emailAddress":9,"legal":10,"addresses":20},"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002F","https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCzHuhQVYFRixtQN2-swcuGg","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fde-voorhoede","+31 20 2610 954","post@voorhoede.nl",[11,14,17],{"title":12,"value":13},"KvK","56017235",{"title":15,"value":16},"BTW","NL851944620B01",{"title":18,"value":19},"IBAN","NL14TRIO0320142078",[21,26],{"address":22,"city":23,"googleMapsLink":24,"postalCode":25},"Koivistokade 70","Amsterdam","https:\u002F\u002Fwww.google.com\u002Fmaps\u002Fplace\u002FDe+Voorhoede+%7C+Front-end+Development\u002F@52.396847,4.8700823,17z\u002Fdata=!3m1!4b1!4m5!3m4!1s0x47c5e21d502d2d59:0xbf570944a96ebf45!8m2!3d52.347647!4d4.8502154","1013 BB",{"address":27,"city":28,"googleMapsLink":29,"postalCode":30},"Koornmarkt 22","Delft","https:\u002F\u002Fwww.google.nl\u002Fmaps\u002Fplace\u002FKoornmarkt+22,+2611+EG+Delft\u002F@52.0093477,4.3573054,17z\u002F","2611 EG",{"title":32,"callToActions":33,"links":39},"Site Menu",[34],{"id":35,"title":36,"link":37},"163140902","Contact",{"__typename":38},"ContactRecord",[40,46,51,56,61],{"id":41,"title":42,"link":43},"163140904","Impact",{"__typename":44,"slug":45},"PageRecord","impact",{"id":47,"title":48,"link":49},"163140905","Services",{"__typename":50},"ServiceOverviewRecord",{"id":52,"title":53,"link":54},"163140906","Cases",{"__typename":55},"CaseOverviewRecord",{"id":57,"title":58,"link":59},"163140908","About us",{"__typename":44,"slug":60},"about-us",{"id":62,"title":63,"link":64},"d6WdFJq2SOuc3dWtpibbXQ","Work at",{"__typename":44,"slug":65},"work-at",{"links":67,"copyrightTitle":93,"copyrightLabel":94,"copyrightLink":95,"privacyTitle":96,"privacyLabel":97,"privacyLink":98,"certificatesGrid":99},[68,71,74,77,82,85,88],{"id":69,"title":42,"link":70},"144185264",{"__typename":44,"slug":45},{"id":72,"title":48,"link":73},"144185265",{"__typename":50},{"id":75,"title":53,"link":76},"144185266",{"__typename":55},{"id":78,"title":79,"link":80},"144185267","Blog",{"__typename":81},"BlogPostOverviewRecord",{"id":83,"title":58,"link":84},"144185268",{"__typename":44,"slug":60},{"id":86,"title":36,"link":87},"144185269",{"__typename":38},{"id":89,"title":90,"link":91},"144185270","FAQ",{"__typename":44,"slug":92},"faq","Creative Commons licence and disclaimer","CC BY 4.0","https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F","De Voorhoede privacy statement (pdf)","Privacy statement","https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1763455455-vh-isms-006-privacy-statement-de-voorhoede-en.pdf",[100,112,123],{"id":101,"image":102,"link":107},"Xq4bBfg_TZ6Fkjax9mkbLQ",{"url":103,"alt":104,"width":105,"height":106},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353463-b-corp-logo-black-rgb.png","B Corp logo",404,680,{"__typename":108,"id":109,"title":110,"url":111},"ExternalLinkRecord","fGW1ak8XQYaYDLkBSyncog","B Corp","https:\u002F\u002Fwww.bcorporation.net\u002Fen-us\u002Ffind-a-b-corp\u002Fcompany\u002Fde-voorhoede\u002F",{"id":113,"image":114,"link":119},"c5mCXRTiSraRIB25fw1p7Q",{"url":115,"alt":116,"width":117,"height":118},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353461-dda-boxlogo-black.png","Dutch Digital Agencies logo",627,480,{"__typename":108,"id":120,"title":121,"url":122},"P6Jh7B0cTv2cKyNEeKVWVQ","Dutch Digital Agencies","https:\u002F\u002Fdutchdigitalagencies.com\u002Fleden\u002Fde-voorhoede\u002F",{"id":124,"image":125,"link":129},"MT5SCyNxSTSr_v5eeATMZw",{"url":126,"alt":127,"width":128,"height":128},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1775730283-dnv.png","DNV logo",518,{"id":130,"title":131,"link":132},"BRtNB5HnT5i-7HkA8IYzBw","DIV",{"__typename":44,"slug":133},"impact\u002Fdigitale-producten-privacy-by-design",[135],{"locale":136,"value":137},"en","upgrade-your-dato-cms-experience-with-custom-plugins",{"page":139},{"slug":137,"i18nSlugs":140,"social":142,"title":143,"subtitle":79,"isArchived":146,"headerIllustration":145,"date":147,"authors":148,"introTitle":164,"items":165,"pivots":218,"relatedBlogPosts":219,"tags":220,"onMountedScript":151,"onUnmountedScript":151},[141],{"locale":136,"value":137},{"title":143,"description":144,"image":145},"Upgrade your (Dato)CMS experience with custom plugins","Improve your (Dato)CMS by using plugins. We show you how it's done, explain the different types of plugins and how to create your own plugin. ",null,false,"2021-12-20T01:00:00.000+01:00",[149,157],{"name":150,"lastName":151,"slug":152,"image":153},"Friso","","friso",{"url":154,"alt":145,"width":155,"height":156},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534636-placeholder.jpg",1235,1646,{"name":158,"lastName":151,"slug":159,"image":160},"Victor","victor",{"url":161,"alt":145,"width":162,"height":163},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534853-victor.jpg",2170,2893,"How do you make sure you get the most out of DatoCMS? We'll show you how, using plugins.",[166,171,175,184,187,194,197,204,207,211,215],{"__typename":167,"id":168,"title":169,"body":170},"TextSectionRecord","88120756","Optimizing your CMS","\u003Cp>\u003Cspan style=\"font-weight: 400;\">We have been fans of headless CMS for some time now and it offers our clients and developers the perfect solution when it comes to managing content. DatoCMS is one of our favourite headless CMSs. We can click this content management system together entirely, according to a client’s needs. Ideal for developers and, if you organise it well, easy for content editors. Moreover, DatoCMS is easy to set up. What more could you want?\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Yet not every \u003Ca href=\"https:\u002F\u002Fwww.voorhoede.nl\u002Fen\u002Fservices\u002Fheadless-cms\u002F\" title=\"headless CMS\">headless CMS\u003C\u002Fa> is complete. Do you want more advanced features for your content editors than DatoCMS provides? That is not a problem. Plugins offer an excellent solution. Plugins make it possible to replace the standard options of DatoCMS or to expand them with third-party widgets. The community (including us) has already made a nice\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\"> \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fwww.datocms.com\u002Fmarketplace\u002Fplugins\">\u003Cspan style=\"font-weight: 400;\">set of plugins available\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\">. You can also use your own private plugins, which you host yourself.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":167,"id":172,"title":173,"body":174},"88120757","How to customize your CMS using plugins","\u003Cdiv>\u003Cspan class=\" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxuz77z1r4efz82zd1c3z75z4z122zmz81zz77z2z122zp7dez67zcz66ziz86zeo\">Here’s a few examples of how we customised DatoCMS to fit the needs of our editors:\u003C\u002Fspan>\u003C\u002Fdiv>\n\u003Cul>\n  \u003Cli>\u003Cspan class=\" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxuz77z1r4efz82zd1c3z75z4z122zmz81zz77z2z122zp7dez67zcz66ziz86zeo\" style=\"background-color: transparent; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; font-weight: inherit; letter-spacing: 0px;\">\u003Cb>Field editor plugins\u003C\u002Fb>\u003C\u002Fspan>\u003Cspan class=\" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxuz77z1r4efz82zd1c3z75z4z122zmz81zz77z2z122zp7dez67zcz66ziz86zeo\" style=\"background-color: transparent; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; font-weight: inherit; letter-spacing: 0px;\"> to r\u003C\u002Fspan>\u003Cspan class=\"thread-492246521514216924446226 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvz89zqz85zkmz89zehxw5z122zg9z88z0avz79zl4z75zz122zz83zz79z3z122zmqz67z\" style=\"background-color: transparent; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; font-weight: inherit; letter-spacing: 0px;\">eplac\u003C\u002Fspan>\u003Cspan class=\"thread-492246521514216924446226 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxuz77z1r4efz82zd1c3z75z4z122zmz81zz77z2z122zp7dez67zcz66ziz86zeo\" style=\"background-color: transparent; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; font-weight: inherit; letter-spacing: 0px;\">e\u003C\u002Fspan>\u003Cspan class=\"thread-492246521514216924446226 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvz89zqz85zkmz89zehxw5z122zg9z88z0avz79zl4z75zz122zz83zz79z3z122zmqz67z\" style=\"background-color: transparent; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; font-weight: inherit; letter-spacing: 0px;\"> a normal field\u003C\u002Fspan>\u003Cspan class=\"thread-492246521514216924446226 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxuz77z1r4efz82zd1c3z75z4z122zmz81zz77z2z122zp7dez67zcz66ziz86zeo\" style=\"background-color: transparent; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; font-weight: inherit; letter-spacing: 0px;\">\u003Cb>. \u003C\u002Fb>\u003C\u002Fspan>\u003Cspan class=\"thread-492246521514216924446226 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvz89zqz85zkmz89zehxw5z122zg9z88z0avz79zl4z75zz122zz83zz79z3z122zmqz67z\" style=\"background-color: transparent; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; font-weight: inherit; letter-spacing: 0px;\">This is a plugin that allows you to style an existing field. Sometimes you just want to add a bunch of key - value pairs, like product details, to a record. With the built-in functionality that becomes unwieldly.\u003C\u002Fspan>\u003Cspan class=\"thread-492246521514216924446226 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxuz77z1r4efz82zd1c3z75z4z122zmz81zz77z2z122zp7dez67zcz66ziz86zeo\" style=\"background-color: transparent; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; font-weight: inherit; letter-spacing: 0px;\"> The\u003C\u002Fspan>\u003Cspan class=\"thread-492246521514216924446226 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvz89zqz85zkmz89zehxw5z122zg9z88z0avz79zl4z75zz122zz83zz79z3z122zmqz67z\" style=\"background-color: transparent; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; font-weight: inherit; letter-spacing: 0px;\"> \u003C\u002Fspan>\u003Cspan class=\"attrlink url thread-492246521514216924446226 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvz89zqz85zkmz89zehxw5z122zg9z88z0avz79zl4z75zz122zz83zz79z3z122zmqz67z\" style=\"background-color: transparent; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; font-weight: inherit; letter-spacing: 0px;\">\u003Ca target=\"_blank\" class=\"attrlink\" data-target-href=\"https:\u002F\u002Fwww.datocms.com\u002Fmarketplace\u002Fplugins\u002Fi\u002Fdatocms-plugin-json-table\" href=\"https:\u002F\u002Fwww.datocms.com\u002Fmarketplace\u002Fplugins\u002Fi\u002Fdatocms-plugin-json-table\" rel=\"noreferrer nofollow noopener\">JSON table plugin\u003C\u002Fa>\u003C\u002Fspan>\u003Cspan class=\"thread-492246521514216924446226 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvz89zqz85zkmz89zehxw5z122zg9z88z0avz79zl4z75zz122zz83zz79z3z122zmqz67z\" style=\"background-color: transparent; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; font-weight: inherit; letter-spacing: 0px;\"> solves that.\u003C\u002Fspan>\u003Cspan class=\"thread-492246521514216924446226 author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxuz77z1r4efz82zd1c3z75z4z122zmz81zz77z2z122zp7dez67zcz66ziz86zeo\" style=\"background-color: transparent; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; font-weight: inherit; letter-spacing: 0px;\"> \u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>",{"__typename":176,"id":177,"image":178,"caption":151,"fullWidth":146,"captionPosition":183},"ImageRecord","88120758",{"url":179,"alt":180,"width":181,"height":182},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1639831274-json-table.png","JSON table showing name and value options",1262,692,"bottom",{"__typename":167,"id":185,"title":151,"body":186},"88120759","\u003Cul>\n  \u003Cli>\u003Cb>Field add-ons plugins\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> to add extra features to a field.\u003C\u002Fspan>\u003Cb> \u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\">This keeps the existing field working, and adds extra features. DatoCMS already gives the option to add a help sentence to fields. This was not enough for us. With the\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\"> \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fwww.datocms.com\u002Fmarketplace\u002Fplugins\u002Fi\u002Fdatocms-plugin-editor-help\">\u003Cspan style=\"font-weight: 400;\">Editor Help plugin\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> you can add an extended text with a title which will be shown below a field.  \u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>",{"__typename":176,"id":188,"image":189,"caption":151,"fullWidth":146,"captionPosition":183},"88120760",{"url":190,"alt":191,"width":192,"height":193},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1639831487-plugin.png","Screenshot of a CMS showing an option the add more info to a field",1480,698,{"__typename":167,"id":195,"title":151,"body":196},"88120761","\u003Cul data-original-start=\"3\" start=\"3\" class=\"listtype-number listindent1 list-number1\">\n  \u003Cli>\u003Cspan class=\" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxuz77z1r4efz82zd1c3z75z4z122zmz81zz77z2z122zp7dez67zcz66ziz86zeo\">\u003Cb>Sidebar widget plugins\u003C\u002Fb>\u003C\u002Fspan>\u003Cspan class=\" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxuz77z1r4efz82zd1c3z75z4z122zmz81zz77z2z122zp7dez67zcz66ziz86zeo\"> to a\u003C\u002Fspan>\u003Cspan class=\"thread-092886609771812378882647 attrcomment attrcommentfirst thread-092886609771812378882647-first author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvz89zqz85zkmz89zehxw5z122zg9z88z0avz79zl4z75zz122zz83zz79z3z122zmqz67z\">\u003Cspan class=\"comment-extra-inner-span\">dd a widget to the sidebar\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"thread-092886609771812378882647 attrcomment author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxuz77z1r4efz82zd1c3z75z4z122zmz81zz77z2z122zp7dez67zcz66ziz86zeo\">\u003Cspan class=\"comment-extra-inner-span\">.\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"thread-092886609771812378882647 attrcomment author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvz89zqz85zkmz89zehxw5z122zg9z88z0avz79zl4z75zz122zz83zz79z3z122zmqz67z\">\u003Cspan class=\"comment-extra-inner-span\"> DatoCMS has a number of standard options in the right-hand sidebar. Do you want to expand these? That is possible with a widget plugin. We usually structure Dato in such a way that an editor can edit each page and add pages itself. It helps if an editor can also browse from one page to another in a dynamic way. How do we get this done? With the \u003Ca href=\"https:\u002F\u002Fwww.datocms.com\u002Fmarketplace\u002Fplugins\u002Fi\u002Fdatocms-plugin-model-deployment-links\">Model Deployment Links plugin\u003C\u002Fa>. \u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan class=\"thread-092886609771812378882647 attrcomment author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qovvz89zqz85zkmz89zehxw5z122zg9z88z0avz79zl4z75zz122zz83zz79z3z122zmqz67z\">\u003Cspan class=\"comment-extra-inner-span\">We show a block in the sidebar with a link to another page, depending on for instance a slug, title or locale. \u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>",{"__typename":176,"id":198,"image":199,"caption":151,"fullWidth":146,"captionPosition":183},"88120762",{"url":200,"alt":201,"width":202,"height":203},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1639831628-model-deployment.png","Screenshot of a CMS that shows how you can edit a field",842,918,{"__typename":167,"id":205,"title":151,"body":206},"88120763","\u003Cp>\u003Cspan class=\" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxuz77z1r4efz82zd1c3z75z4z122zmz81zz77z2z122zp7dez67zcz66ziz86zeo\">The examples mentioned above are all public plugins. Private plugins are often customer specific.An example of such a plugin is retrieving product info from a customer database.  This info is needed to display a certain page within Dato.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":167,"id":208,"title":209,"body":210},"88120764","Creating a plugin","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Now that you have an idea of what you can use plugins for and where to find them, it is time for the next step: creating your own plugin, when it is not yet created by the community. We offer you the necessary guidelines to get started. \u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">A plugin is nothing more than an iframe within DatoCMS. This is a piece of HTML code that can call up a frame from another website and place it on your website. Within this frame everything can happen that you want to show with a plugin, from adding a Youtube video to adding a map from Google Maps. This implies that you can also use a self-hosted plugin, as long as there is a working url in the plugin settings, or the plugin has been imported through the DatoCMS plugin library itself. \u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">How do you get started with your own plugin? \u003C\u002Fspan>\u003C\u002Fp>\n\u003Col>\n  \u003Cli>\u003Cspan style=\"background-color: transparent; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; letter-spacing: 0px;\">First you import the DatoCMS plugin SDK. \u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">On the window element you initialize the plugin. \u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">The init on DatoCmsPlugin has an init property which is given a function that exposes a variable. For the sake of simplicity we will call it a plugin. \u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">The plugin contains everything you need to use your plugin.\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">The methods and options you can use are well described \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fwww.datocms.com\u002Fdocs\u002Fbuilding-plugins\u002Fsdk-reference\">\u003Cspan style=\"font-weight: 400;\">here\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\">. DatoCMS also provides \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fwww.datocms.com\u002Fdocs\u002Fbuilding-plugins\">\u003Cspan style=\"font-weight: 400;\">specific steps\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> for a field editor plugin, field add-on plugin and sidebar widget plugin. \u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Attention: uploading to npm needs specific settings. A specific name and the package.json should look like what DatoCMS requires. Otherwise the plugin will not be picked up by their system. It will take some time before you will find your plugin in the plugin marketplace of Dato. \u003C\u002Fspan>\u003C\u002Fp>",{"__typename":167,"id":212,"title":213,"body":214},"88120765","DatoCMS plugin system update","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Recently DatoCMS announced that the \u003Ca href=\"https:\u002F\u002Fwww.datocms.com\u002Fblog\u002Foctober-update-2021\">plugin system will be updated\u003C\u002Fa>. \u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">In response to all self-hosted plugins, which allowed DatoCMS to see what was missing or could be improved, adjustments can be expected in the following areas:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Typescript-ready: the whole process of creating a plugin should be guided and documented.\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Multi-purpose: a single plugin should be able to work on different points of the interface: customisation of fields, of course, but also new sections\u002Fpages, sidebar panels, dashboard widgets, modals, external sources to fetch assets, etc. \u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Freedom: every plugin should offer a fully customisable settings panel, an easy upgrade process, and should be able to specify how it wants to change the interface at run-time instead of via a static \"manifest\".\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Of course, the current plugins will continue to work, but the new SDK will enable much more and work better.  \u003C\u002Fspan>\u003C\u002Fp>",{"__typename":167,"id":216,"title":151,"body":217},"88120766","\u003Cp>\u003Cspan style=\"font-weight: 400;\">So, plenty of options to enhance the functionality of your website! \u003C\u002Fspan>\u003C\u002Fp>",[],[],[221],{"id":222,"title":223,"slug":224,"blogPosts":225},"WTPJX79URE-O5lpWLJeEHg","Headless CMS","headless-cms",[226,237,250],{"slug":227,"title":228,"date":229,"authors":230},"dropbox-paper-as-a-headless-cms","Dropbox Paper as a headless CMS","2019-01-25T01:00:00.000+01:00",[231],{"name":232,"image":233},"Jasper",{"url":234,"alt":145,"width":235,"height":236},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683535518-jasper.jpg",1892,2523,{"slug":238,"title":239,"date":240,"authors":241},"figma-as-a-cms-where-design-and-development-collide","Figma as a CMS; where design and development collide","2022-02-10T01:00:00.000+01:00",[242,248],{"name":243,"image":244},"Bas ",{"url":245,"alt":145,"width":246,"height":247},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683535728-bas-g.jpg",2394,3192,{"name":150,"image":249},{"url":154,"alt":145,"width":155,"height":156},{"slug":251,"title":252,"date":253,"authors":254},"enriching-rich-text-with-inline-components-datocms-react","Enriching rich text with inline components (DatoCMS + React)","2021-11-19T01:00:00.000+01:00",[255],{"name":232,"image":256},{"url":234,"alt":145,"width":235,"height":236},1776256145510]