Adding your Instagram, Facebook or Twitter widget to your ZOHO website is easy. Follow these steps to create your widget.
Once you've created your widget, follow the appropriate steps below to add it to your website.
On your ZOHO dashboard, select your site under Websites > My Sites.
This will open the ZOHO site builder allowing you to edit your site.
We will use the Embed element to place the SnapWidget code snippet on the Content Area of your page. Note that this is page specific, thus if you want to display your widget on pages other than your Home page you will have to repeat the process for that page. The procedure to insert your widget on your Blog page or your Contact page differs from the Home page.
Inserting your widget on your Home Page
Select your Home Page. Ignore the displayed options (Add Page and Manage Pages), these are used to create new pages and move pages around as displayed on your website.
Drag the Embed element onto the Content Area of your Home Page. If you already have content on your page, you can move it to where you want the widget to appear.
The Embed dialogue box will open to allow you to Embed HTML or add a Code Snippet. For our purpose you MUST select the Code Snippet option. Select Code Snippet and paste your snippet in the text box. Click on OK to close the Embed dialogue box.
To view your content you will have to publish your site (see the message on the builder page).
Click on Publish
Close the Popup message regarding the successful publishing of your site and view your site to see how your widget is displayed.
If you want to insert a Heading before your snippet, use the Heading option on the builder toolbar. Drag the Heading element on the Content Area just before the Code Snippet.
Add your Heading content in the text box, select the Font type, Size, Format, Justification, etc. and click on Publish.
Your page will now have a Heading displayed before your widget.
Inserting your widget on your Blog page.
Select your Blog page. Ignore the displayed options (Add Page and Manage Pages), these are used to create new pages and move pages around as displayed on your website.
If you don’t have a Blog post, first create a new post. Click on New Post.
Enter your post title and add your post content (e.g. a Heading, Paragraph) by dragging the appropriate item on to the Post Container area and filling in the contents (formatting is the same as in the Home Page option). Drag the Embed element onto the Post Container Area and paste your code snippet as we have done for the Home Page.
Click on Publish Post.
Your blog post will now be displayed as follows
Click on the Read more… link to view your complete post displaying your widget.
Inserting your widget on your Contact Page.
Select your Contact Page. Ignore the displayed options (Add Page and Manage Pages), these are used to create new pages and move pages around as displayed on your website.
On the Contact Page you can add your snippet before or after the Contact Form by dragging the Embed element to the appropriate position.
Before the form
After the form
You can also add a Heading as we did in the Home Page option.
Click on Publish and view the Contact page of your website.
Before the form
After the form
