Builder content link
Builder.io: Drag and drop page builder and CMS
Builder public api key
3c0d498f824c4afdb8210bfcdf871064
What are you trying to accomplish
Content created in builder.io editor is supposed to be accessible only to authorized users. Is there a way to use our backend server as proxy between frontend Angular app and builder.io, to hide our public API key and ensure user has access? Is it possible to override API host?
Code stack you are integrating Builder with
Angular
Hey @GPI_Alex - you may want to consider using our HTML API
In that case, you have full control as to what content to display when and why.
Additionally, you could always set your models to have “public readable” off, such that a private key is required to fetch the content
Using these two things, you can have completely granular control as to what content displays to who, where, and when, by wrapping your own API/auth layer around our APIs for serving content to your users (for example only to authenticated users, etc)
Hi Steve,
Thank you for a quick reply.
I just tried HTML API, it returns some settings as [object Object]. Is there any way around this?
<he-cms-pie-chart builderState="[object Object]" builderBlock="[object Object]"
chartData="[object Object],[object Object]" usePercentage="true" showLegend="true"
fontColor="rgba(126, 211, 33, 1)" fontWeight="900" fontSize="20" chartFont="[object Object]"
legendFont="[object Object]"></he-cms-pie-chart>
Hi @GPI_Alex - the HTML API response is an object (JSON) that looks like this:
{
"id": "c923kd89",
"name": "About page",
"data: {
"html": "<div data-builder-component="banner-ad"><div class="builder-blocks"><h1>Hello!</h1></div></builder-div>"
}
}
You can read more about our HTML API here
Here is how my data is looking. You can see that most settings are just [object Object]. Is it possible to get list/object settings from the editor?
{
"createdBy": "IR1CFFgGRwP1rM80H9bF7mJ9kIo1",
"createdDate": 1635161516149,
"data": {
"title": "United Kingdom",
"url": "/builder",
"html": "<builder-component rev=\"hoqwntjxtrt\" api-key=\"3c0d498f824c4afdb8210bfcdf871064\" name=\"country\" entry=\"93fd53521d064a8c815b202b6b01ceed\">\n\n<!-- ***** Generated by Builder.io on Fri, 29 Oct 2021 13:06:03 GMT ***** -->\n\n<style type=\"text/css\" class=\"builder-styles builder-api-styles\">/*start:h47494*/.css-h47494{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;}/*end:h47494*/ /*start:qguwqq*/.css-qguwqq.builder-block{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;box-sizing:border-box;margin-top:20px;line-height:normal;height:auto;text-align:center;}/*end:qguwqq*/ /*start:1qggkls*/.css-1qggkls{outline:none;}.css-1qggkls p:first-of-type,.css-1qggkls .builder-paragraph:first-of-type{margin:0;}.css-1qggkls > p,.css-1qggkls .builder-paragraph{color:inherit;line-height:inherit;-webkit-letter-spacing:inherit;-moz-letter-spacing:inherit;-ms-letter-spacing:inherit;letter-spacing:inherit;font-weight:inherit;font-size:inherit;text-align:inherit;font-family:inherit;}/*end:1qggkls*/ /*start:96q1si*/.css-96q1si.builder-block{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;position:relative;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;box-sizing:border-box;margin-top:20px;}/*end:96q1si*/ /*start:1mvsfya*/.css-1mvsfya.builder-block{height:0;width:0;display:inline-block;opacity:0;overflow:hidden;pointer-events:none;}/*end:1mvsfya*/</style><div class=\"builder-component builder-component-93fd53521d064a8c815b202b6b01ceed\" data-name=\"country\" data-source=\"Rendered by Builder.io\"><div class=\"builder-content\" builder-content-id=\"93fd53521d064a8c815b202b6b01ceed\" builder-model=\"country\"><div data-builder-component=\"country\" data-builder-content-id=\"93fd53521d064a8c815b202b6b01ceed\" data-builder-variation-id=\"93fd53521d064a8c815b202b6b01ceed\"><style data-emotion-css=\"h47494\"></style><div class=\"builder-blocks css-h47494\" builder-type=\"blocks\"><style data-emotion-css=\"qguwqq\"></style><div class=\"builder-block builder-c3aef2604ecc476ab0c0abf09e9b3c0c builder-has-component css-qguwqq\" builder-id=\"builder-c3aef2604ecc476ab0c0abf09e9b3c0c\"><style data-emotion-css=\"1qggkls\"></style><span class=\"builder-text css-1qggkls\"><p><u>Rich text</u> built into <a href=\"https://builder.io/\" rel=\"noopener noreferrer\" target=\"_blank\"><strong><em>Builder.IO</em></strong></a></p></span></div><style data-emotion-css=\"96q1si\"></style><div class=\"builder-block builder-f848c0522f6449ec9b9dd655f9c29b59 builder-has-component css-96q1si\" builder-id=\"builder-f848c0522f6449ec9b9dd655f9c29b59\"><he-cms-pie-chart builderState=\"[object Object]\" builderBlock=\"[object Object]\" chartData=\"[object Object],[object Object]\" usePercentage=\"true\" showLegend=\"true\" fontColor=\"rgba(126, 211, 33, 1)\" fontWeight=\"900\" fontSize=\"20\" chartFont=\"[object Object]\" legendFont=\"[object Object]\"></he-cms-pie-chart></div><div class=\"builder-block builder-e8d2fa8f4f4d44f49b430a74bfce78aa builder-has-component css-qguwqq\" builder-id=\"builder-e8d2fa8f4f4d44f49b430a74bfce78aa\"><span class=\"builder-text css-1qggkls\"><p>Fetching IRP data doesn't work in builder.io, but displays on page when published</p></span></div><div class=\"builder-block builder-a0094574aa2d44ac9bd2e05304b81505 builder-has-component css-96q1si\" builder-id=\"builder-a0094574aa2d44ac9bd2e05304b81505\"><he-cms-irp-map builderState=\"[object Object]\" builderBlock=\"[object Object]\" query=\"Italy\"></he-cms-irp-map></div><style data-emotion-css=\"1mvsfya\"></style><img src=\"https://cdn.builder.io/api/v1/pixel?apiKey=3c0d498f824c4afdb8210bfcdf871064\" role=\"presentation\" width=\"0\" height=\"0\" class=\"builder-block builder-pixel-7hq9in015hc css-1mvsfya\" builder-id=\"builder-pixel-7hq9in015hc\"/></div></div></div></div></builder-component>\n<script async src=\"https://cdn.builder.io/js/webcomponents\"></script>"
},
"id": "93fd53521d064a8c815b202b6b01ceed",
"lastUpdatedBy": "IR1CFFgGRwP1rM80H9bF7mJ9kIo1",
"meta": {
"hasLinks": false,
"kind": "page"
},
"modelId": "7b8c0eb4a72c4937850b9df71030153b",
"name": "United Kingdom",
"published": "published",
"query": [
{
"@type": "@builder.io/core:Query",
"operator": "is",
"property": "urlPath",
"value": "/builder"
}
],
"testRatio": 1,
"lastUpdated": 1635506768719,
"screenshot": "https://cdn.builder.io/api/v1/image/assets%2F3c0d498f824c4afdb8210bfcdf871064%2Fa87b4a08f3c14830b13ad218cb7d44ce",
"rev": "hoqwntjxtrt"
}
Hi @steve
Content API returns all settings for lists and objects, unlike HTML API which replaces settings with [object Object]. Is it possible to use @builder.io/sdk to render this in Angular?
Hey @GPI_Alex - you are probably seeing [object Object] because there is no way on the server to pass complex data properties via HTML for webcomponents. But they should hydrate into your Angular app as expected
Have you tried inserting that HTML into your angular app? Note that the <script> tag included needs to run as well, which won’t happen if you just innerHTML that content, but you can just include it in your code however you like, it is just <script async src="https://cdn.builder.io/js/webcomponents"></script>.
That is what loads those components which should get the inputs working as expected once the browser hydrates