Activate Bluebird climate on Nyla
In order to use Bluebird widgets on your product pages, you need to activate the app, and then add the widgets that Bluebird send you to your site.
Note there is a current limitation on Bluebird's side where they only support product page widgets for headless sites. Their cart widget is not supported.
Adding Bluebird to your site:
When signing up with Bluebird, they will send different scripts for you to add to your PDPs. In order to add these to your product pages, you need to take the following steps:
- Activate the app: To activate the app, go to Apps > Bluebird and enter the path name from your scripts provided by the Bluebird team. The path name will come after /embed and before the ?id in the script they send you. You should enter it with the preceding "/", e.g:
/brandname
<script src="https://learn.bluebirdclimate.com/embed/brand_name?id=widgetid" async="" type="text/javascript"></script>
Example of a Bluebird script with the path highlighted in bold
- Add the Bluebird widget content item: Once activated, you will be able to add the Bluebird widget content item to your page. In order for the widget to appear, you should add the widget ID in to the ID field under App Settings. This appears after ?id= in the script provided by Bluebird.
<script src="https://learn.bluebirdclimate.com/embed/brand_name?id=EthMGAUt32t3hdshsubiDXBOotNgD3sS1c10z6vGbXuqy6DWslRKhZFqK_JbTNX3Z0XM5x2pBbPvfmv0H_MIfRNBM-ueSyQM89GjjLUGU4efDg" async="" type="text/javascript"></script>
Example of a Bluebird script with widget ID highlighted in bold
The widget ID is overridable, so if you want to use the same template on multiple pages, you can add the ID as an override on each page where it is used.
Troubleshooting:
Alignment issues: The widget is hardcoded to be 100% width and aligned to the left, so in order to align it centrally, you can use columns or group with a manual width.
Widget not showing up: The ID entered into the editor needs to be valid. If the ID is valid, you'll see the editor show up in the live preview:
If the widget has an invalid ID, you will see the following in the editor live preview:
