​​Widget page contains the table with all widgets.

Widget Snippet Code

Simple integration on your website include next steps:

  1. Get Snippet html-code for appropriate widget

  2. Add copied html-code to your website (vertical widgets optimal place to sidebars, horizontal - under the article or after 2-5 paragraphs in the article or post)

  3. Check if the State of widget change to Active on Customer Dashboard -> 'Widgets' page (if integration success - status will be 'Active')

Notice: If you have any question or need assist and help - feel you free and send request to [email protected] or create ticket with support system in Customer Dashboard

Add New/ Edit Widget

You need fill/edit next fields and save the form:

  1. Type Title of widget;

  2. Choice Type of Widget (Vertical or Horizontal);

  3. Change Heading or go to step 4. Some Examples: Top Stories, Related, Hot Content, Latest news, etc. ;

  4. Set Count of card Items for the widget;

  5. If you want to enable auto translate content to browser language (for example, not the English audience case) set checkbox Translate Content;

  6. For Horizontal widget Type you can set Size of the item according next rule: max size - 12, min - 1. It's mean max 12 card items per 1 row in the widget. If you set, for example, Size of Item as 3 or 4 it's mean widget will have 4 or 3 card items per row);

  7. For Vertical widget Type you can set checkbox Big Image for alternative design for vertical design;

  8. If you create a widget for Recommendation Service case set checkbox Self-Related Widget;

  9. Click Save button.

Widget Color Customization

BlocksInform provides default a color scheme for new widgets. You can change it for your needs.

Next elements of the widget available to change the color: header background (head back), head title, teaser card background (teaser back), teaser title, teaser card divider line (divider), border of teaser card on focus (focus). Complete next steps to change color:

  1. Click to input field with hashcode;

  2. Choice color with opened color picker;

  3. Alternate paste hashcode directly to an input field.

Color Customize Tip: For best expirience you can choice ready color scheme with two option variants (normal-inverse and light-dark). And adjust any widget item color after.

Last updated