As an Arrivedo Writer, you can now easily share the Neighborhood Guides you've created on your personal website with this amazing widget. Install the widget to gain more exposure and traffic to your content!
Add Code Manually
1. Choose Email Address
The first step is to add an email address. The email must be the same one as your Arrivedo account in order to connect with the NGs you've written.
To test, you can use this example URL:
"https://kipulab.github.io/arrivedo-embedded-widget/widget/#/writers-slider/langen.journalism@gmail.com?nav=true"
2. Place Embedded Widget Tag
Next place the Embedded Widget tag into where you wish it to appear on your website. Replace {your-widget-url}
with your widget's URL.
<iframe src="{your-widget-url}" width="100%" height="320" frameborder="0"></iframe>
3. Place Backlink
Next place the Backlink next to Embedded Widget tag into where you wish it to appear on your website.
<p style="text-align:center!important; width:100%; line-height:15px; display:inline-block!important; margin:5px auto 20px!important; font-size:12px!important; color:#777!important;"> <a rel="nofollow" style="box-shadow:none!important; border:0px!important; display:inline-block!important; color:#bbb!important; text-transform:uppercase!important; font-weight:500!important; font-family:'Lato', sans-serif; text-decoration:none!important; font-size:0.7em!important;" href="https://arrivedo.com"> Powered by <span style="background:url(https://i.arimg.net/static/arlg.svg) no-repeat center center!important; background-size:contain!important; width:15px!important; overflow:hidden!important; display:inline-block!important; margin-bottom:-3px!important; margin-left:2px!important; color:transparent!important;"> a </span> </a> </p>
Note: You must provide a link to Arrivedo. To do it, don't forget to include the code above next to your embedded widget.
4. Testing
Once you'ce completed these steps, you'll be able to test your Embedded Widget. The complete integration will look something like this:
<html> <title>My Website</title> <body> <iframe src="https://kipulab.github.io/arrivedo-embedded-widget/widget/#/writers-slider/langen.journalism@gmail.com?nav=true" width="100%" height="320" frameborder="0"></iframe> <p style="text-align:center!important; width:100%; line-height:15px; display:inline-block!important; margin:5px auto 20px!important; font-size:12px!important; color:#777!important;"> <a rel="nofollow" style="box-shadow:none!important; border:0px!important; display:inline-block!important; color:#bbb!important; text-transform:uppercase!important; font-weight:500!important; font-family:'Lato', sans-serif; text-decoration:none!important; font-size:0.7em!important;" href="https://arrivedo.com"> Powered by <span style="background:url(https://i.arimg.net/static/arlg.svg) no-repeat center center!important; background-size:contain!important; width:15px!important; overflow:hidden!important; display:inline-block!important; margin-bottom:-3px!important; margin-left:2px!important; color:transparent!important;"> a </span> </a> </p> </body> </html>
The result of our test example is shown in the screenshot below.
Tip: You need to load the Embedded Widget Tag and Backlink ideally right before the closing </body>
tag.
5. Customizing
Follow the instructions further down this page to adjust the autoplay, timeout and other settings.
Example
Do you want to further customize your widget? If so, you need to some additional parameters to the widget's URL.
You can add the additional parameter: disabled_autoplay
and set the value to true
in order to stop the automatic play of the carousel.
"https://kipulab.github.io/arrivedo-embedded-widget/widget/#/writers-slider/langen.journalism@gmail.com?nav=true&disabled_autoplay=true"
Parameters
All parameters need to be sent URL-encoded.
Parameter | Description |
---|---|
|
The email address of your Arrivedo account (required). |
|
If set to true, the embed code includes the dots on the slider (optional). |
|
If set to true, the carousel will not play automatically once the widget has loaded (optional). |
|
This is the autoplay interval timeout. By default, it's set to 2500 milliseconds (optional). |
|
Color theme for your widget. Accepted values: |
|
Set the background color for your carousel. It should be in hexadecimal value, e.g. |
Comments
0 comments
Please sign in to leave a comment.