| 1 | = Embedding Widgets = |
|---|
| 2 | |
|---|
| 3 | ''This page explains two ways to embed Piwik widgets in your web pages: IFRAMEs and OBJECTs'' |
|---|
| 4 | |
|---|
| 5 | You can access the basic code from the '''[http://piwik.org/demo/index.php?module=Widgetize&action=index&idSite=1&period=day&date=yesterday Widgets]''' menu. |
|---|
| 6 | |
|---|
| 7 | == IFRAMEs == |
|---|
| 8 | |
|---|
| 9 | Below the '''Widget Preview''' you'll find next to the '''Embed Iframe''' label, the HTML code to embed the selected widget in an IFRAME in your web page. The widget is configured entirely through the iframe element's src attribute URL. (Do not change ''module=Widgetize'' and ''action=iframe''.) |
|---|
| 10 | |
|---|
| 11 | To construct the URL, you'll need (in addition to the Piwik base URL, and aforementioned module and action: |
|---|
| 12 | |
|---|
| 13 | * moduleToWidgetize - the module (plugin) the provides the widget |
|---|
| 14 | * actionToWidgetize - the action (method) that provides the data for the widget |
|---|
| 15 | * idSite - website ID |
|---|
| 16 | * period - day, week, month, or year |
|---|
| 17 | * date - a date (YYYY-MM-DD), date range (YYYY-MM-DD,YYYY-MM-DD), or alias (e.g., 'today') |
|---|
| 18 | * disableLink - typically set to 1; when enabled, clicking on the evolution graph opens the dashboard to that date |
|---|
| 19 | |
|---|
| 20 | To set the initial chart type displayed, add the viewDataTable parameter. Valid values include: |
|---|
| 21 | |
|---|
| 22 | * tableAllColumns |
|---|
| 23 | * tableGoals |
|---|
| 24 | * table |
|---|
| 25 | * cloud |
|---|
| 26 | * graphPie |
|---|
| 27 | * graphVerticalBar |
|---|
| 28 | * graphEvolution |
|---|
| 29 | |
|---|
| 30 | Advantages: |
|---|
| 31 | * No cross domain issues. |
|---|
| 32 | * Footer controls to change chart type and export as image. |
|---|
| 33 | |
|---|
| 34 | Disadvantages: |
|---|
| 35 | * More code to cut & paste. |
|---|
| 36 | |
|---|
| 37 | == OBJECTs == |
|---|
| 38 | |
|---|
| 39 | Below the '''Widget Preview''' you'll find next to the '''Embed Flash''' label, the HTML code to embed the selected widget as a Flash OBJECT in your web page. The widget is configured in a param element named, "flashvars", where the value attribute contains an escaped URL. |
|---|
| 40 | |
|---|
| 41 | To construct the URL, you'll need (in addition to the Piwik base URL): |
|---|
| 42 | |
|---|
| 43 | * module - the module (plugin) the provides the widget |
|---|
| 44 | * action - the action (method) that provides the data for the widget |
|---|
| 45 | * idSite - website ID |
|---|
| 46 | * period - day, week, month, or year |
|---|
| 47 | * date - a date (YYYY-MM-DD), date range (YYYY-MM-DD,YYYY-MM-DD), or alias (e.g., 'yesterday') |
|---|
| 48 | * viewDataTable - generateDataChartVerticalBar, generateDataChartPie, generateDataChartEvolution |
|---|
| 49 | |
|---|
| 50 | Advantages: |
|---|
| 51 | * Simple. |
|---|
| 52 | * Compact code to cut & paste |
|---|
| 53 | |
|---|
| 54 | Disadvantages: |
|---|
| 55 | * Limited to Flash-based charts (e.g., pie chart, vertical bar chart, and evolution graph) |
|---|
| 56 | * May require a crossdomain.xml policy file. See 'misc/crossdomain.xml' for an example. |
|---|
| 57 | |
|---|
| 58 | == See also == |
|---|
| 59 | |
|---|
| 60 | * [/wiki/API Piwik web analytics API] |
|---|
| 61 | * [/wiki/API/Reference API Reference] |
|---|
